Question

我正在尝试设置Browsersync以通过AJAX加载文档。

所有文件都存储在项目根文件夹中：

gulpfile.js
index.html
load-me.html

简化的浏览器同步设置

gulp.task('server', () => 

  browserSync.init({
    files: '*.html',
    server: {
      baseDir: './'
    },
    port: 9000,
    notify: false
  });
});

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try to load content via AJAX</title>
</head>
<body>

  <button>Click me</button>
  <div id="result"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <script>
  $(function(){
    $('button').click(function(){
      $('#result').load('load-me.html');
    });
  });
  </script>

</body>
</html>

负载me.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Yay!</title>
</head>
<body>
  <h1>10x, God. It's loaded!</h1>
</body>
</html>

当我启动MAMP服务器时，一切正常。但是Browsersync设置已损坏。我无法解决它。请帮忙，谁知道。

提前致谢：）

Answer 1

这是因为每次请求html页面时，浏览器同步都会修改响应。修改后的html页面附带一个document.write的脚本。如果您检查html源代码，则会看到如下内容：

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.12.3.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

在load-me.html服务器中请求时，browser-sync页面也会发生这种情况。插入#result元素的修改后的html响应也会插入上面的脚本，它会重新运行document.write，从而覆盖整个html页面。

解决方案有两种选择：

通过 loading page fragments 从#result html页面定位要插入load-me.html内的特定html标记。示例如下。

<强>的Javascript

$('#result').load('load-me.html h1');

上面的示例只应在h1页面中插入load-me.html元素，而不是整个load-me.html html内容。

如果没有load-me.html和html标记，您可以选择只在body内提供所需的html内容。

如何设置Browsersync以正确提供AJAX请求？

1 个答案: