首页 文章

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

提问于
浏览 次
4

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

这是一个SPA，所以没有导航到其他页面完成 . 导航是通过文档片段中的路径完成的（我使用SammyJs库）

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

好像 BrowserSync doesn't synchronizes document fragments . 我认为这是因为文档片段由浏览器处理而不是在BrowserSync服务器/代理请求 .

有没有办法使场景有效？

PS：导航时我有一个javascript回调，我可以用它在开发时将新url发送到BrowserSync（如果BrowserSync支持类似的东西）

single-page-application

1 回答

  • 1

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

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

    从那时起，我已经分叉并修复了这个以及其他问题，即mouseup，mousedown，keyup，keydown和contenteditable div的事件同步 .

    pull-request仍处于待定状态，因此您可以使用https://github.com/nitinsurana/browser-sync-client中的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
});
    回复于

相关问题