尝试在Chrome中加载仪表板页面时，避免使用document.write()发生 [英] Avoid using document.write() occurs when trying to load a dashboard page in Chrome
问题描述
所以我在这个问题上停留的时间比我想承认的要长，但是作为Angular新手，我完全感到困惑.
So I have been stuck on this problem for longer than i'd care to admit but as a Angular newbie I am completely baffled.
因此，我正在关注一些在线教程，以便将Gulp实施到我正在开发的应用程序中，每当我运行Gulp任务时，我都会在Chrome中看到一条错误消息，指出:
So I am following some online tutorials in order to implement Gulp into an application I am working on and whenever I run the Gulp tasks I get an error in Chrome which states:
"[违反]避免使用document.write().(匿名)@(索引):13"
和:
//\/script>.replace(" HOST，location.hostname))；//]]>
我更加困惑，因为index.html在执行之前实际上并不包含document.write引用.此外，尽管在集成Gulp时大多遵循教程，但我似乎无法在屏幕上反映CSS背景更改，这是否与前面提到的错误有关?
I am even more confused as the index.html doesn't actually contain a document.write reference before execution. Also despite mostly following a tutorial when integrating Gulp I cannot seem to have the CSS background changes reflected on screen, could this be related to the previously mentioned error?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>SmartSystemOverviewWeb</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="app/css/styles.css" rel="stylesheet">
</head>
<body>
<sso-dashboard>
Loading...
<i class="fa fa-spinner fa-spin"></i>
</sso-dashboard>
<script type="text/typescript" src="app/vendor.ts"></script>
<!-- <script src="app/app.component.js"></script> -->
</body>
</html>gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var tsc = require('gulp-typescript');
var tslint = require('gulp-tslint');
var tsProject = tsc.createProject('tsconfig.json');
var config = require('./gulp.config')();
var browserSync = require('browser-sync').create();
var superstatic = require('superstatic');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
/*
-- TOP LEVEL FUNCTIONS --
gulp.task - Define tasks
gulp.src - point to files to use
gulp.dest - point to folder to output
gulp.watch - watch files + folders for changes
*/
// Logs Message
gulp.task('message', function(){
return console.log('Gulp is running...');
});
gulp.task('ts-lint', function() {
console.log('ts-lint task running...');
return gulp.src(config.allTs)
.pipe(tslint())
.pipe(tslint({
formatter: "verbose"
}))
// .pipe(tslint.report("verbose"))
})
gulp.task('compile-ts', function() {
console.log('compile-ts task running...');
var sourceTsFiles = [
config.allTs,
config.typings
];
var tsResult = gulp
.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsProject())
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});
gulp.task('sass', function(){
console.log('sass is running...');
// return gulp.src('src/app/styles.scss')
return gulp.src('src/app/**/*.scss')
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest('src/app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
console.log('browserSync is running...');
browserSync.init({
// port: 4200,
// file: ['index.html', '**/*.js'],
// injectChanges: true,
// logFileChanges: true,
// logLevel: 'verbose',
// notify: true,
// reloadDelay: 0,
server: {
baseDir: 'src',
middleware: superstatic({debug: false})
},
})
})
gulp.task('watch', ['browserSync', 'sass'], function(){
gulp.watch('src/app/**/*.scss', ['sass']);
gulp.watch('src/app/component/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/app/**/*.html', browserSync.reload);
gulp.watch('src/app/component/**/*.html', browserSync.reload);
gulp.watch('src/app/**/*.js', browserSync.reload);
gulp.watch('src/app/component/**/*.js', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
})
gulp.task('useref', function() {
var assets = useref.assets();
return gulp.src('app/*.html')
.pipe(assets)
.pipe(gulpIf('*.css', minifyCSS()))
.pipe(gulpIf('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'))
});
gulp.task('images', function() {
return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
.pipe(cache(imagemin( {
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
});
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
});
// Cleaning
gulp.task('clean', function(callback) {
del('dist');
return cache.clearAll(callback);
})
gulp.task('clean:dist', function(callback) {
del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});
// Build Sequences
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'images', 'fonts'],
callback
)
})
gulp.task('default', function (callback) {
runSequence(['message', 'ts-lint', 'sass', 'browserSync', 'watch'],
callback
)
})styles.css
.testing {
width: 71.42857%; }
.head {
background: red; }
.body {
background: #177794; }
.html {
background: green; }任何解决这些问题的技巧或建议，将不胜感激！
Any tips or advice to solve these issues would be greatly appreciated!
提前谢谢！
推荐答案
违规消息是由browserSync引起的，它将在文档中添加以下行.
The violation message is caused by browserSync that will add the following line to the document.
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.3'><\/script>".replace("HOST", location.hostname));
//]]></script>
这几乎可以忽略，因为它只会在通过browserSync而不是最终应用程序查看时影响应用程序.
This can be pretty much ignored as it will only affect the app when it's viewed through browserSync and not the final app.
这篇关于尝试在Chrome中加载仪表板页面时，避免使用document.write()发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
