SPA的浏览器同步：如何同步文档片段：＃/联系人

Jo VdB 发表于 Dev

乔VdB

我正在开发SPA（单页应用程序）并使用grunt-browsers-sync。所有浏览器同步功能似乎都起作用：CSS注入，滚动和表单同步。

这是SPA，因此无法导航到其他页面。导航是通过文档片段中的路线完成的（为此，我使用SammyJs库）

mysite.com/#/home
mysite.com/#/contact
mysite.com/#/...

似乎BrowserSync无法同步文档片段。我认为这是因为文档碎片是由浏览器处理的，而没有在BrowserSync服务器/代理处请求。

有什么办法可以使方案工作？

PS：导航时我有一个JavaScript回调，可用于在开发时将新的URL发送到BrowserSync（如果BrowserSync支持类似的功能）

encoding_idiot

我还尝试将浏览器同步用于单页主干应用程序。

路线更改基本上是在单击锚点时触发的。不幸的是，浏览器同步不适用于具有stopPropagation的事件，因此，未在其他浏览器中触发点击，并且路由已同步。

从那时起，我就解决了这个问题，并修复了其他问题，例如mouseup，mousedown，keyup，keydown和contenteditable div的事件同步。

但是pull请求仍然处于待处理状态，因此您可以在https://github.com/nitinsurana/browser-sync-client中使用浏览器同步客户端

您需要具有以下配置才能使修补程序生效。请注意，在浏览器同步中不存在捕获，contenteditable，mouseup和其他配置选项

var bs     = require("browser-sync").create();
var client = require("./");

client["plugin:name"] = "client:script";

bs.use(client);

bs.init({
    //server: {
    //    baseDir: ["test/fixtures"]
    //},
    proxy: 'http://localhost:8080',
    open: false,
    minify: false,
    snippetOptions: {
        rule: {
            //match: /SHNAE/,
            match: /<\/head>/i,
            fn: function (snippet) {
                return snippet + "\n</head>";
            }
        }
    },
    clientEvents: [
        "scroll",
        "input:text",
        "input:toggles",
        "input:keydown",
        "input:keypress",
        "form:submit",
        "form:reset",
        "click",
        "contenteditable:input",
        "mouseup",
        "mousedown",
        "select:change"
    ],
    ghostMode: {
        clicks: true,
        scroll: true,
        forms: {
            submit: true,
            inputs: true,
            toggles: true,
            keypress: true,
            keydown: true,
            contenteditable: true,
            change: true
        },
        mouseup: true,
        mousedown: true
    },
    capture:true
});