如何设置 Browsersync 以正确处理 AJAX 请求？

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>

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

解决方案有两种选择：

通过 loading page fragments[在 load-me.html html 页面中的 #result 中要插入的目标特定 html 标签。下面的示例。

Javascript

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

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

您可以选择只在 load-me.html 中包含您需要的 html 内容，而不包含 html 和 body 标签。

如何设置 Browsersync 以正确处理 AJAX 请求？

How to set up Browsersync to correctly serve AJAX requests?

ajax

jquery

browser-sync