How to optional browser sync ?

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io

Apache License 2.0

12.17k stars 754 forks source link

Issue details

I use the BS development background management system, the system layout with iframe look like:

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <title>home</title>
<body>
<!-- navigation code -->
<iframe src="user/userList.html"></iframe>
<!-- footer code -->
</body>
</html>

When i change files, all page are reload. But i only want to reload iframe. How can i do that?

Steps to reproduce/test case

n/a

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.18.8 ]
Node [ v4.4.5 ]
Npm [ 2.15.5 ]

Affected platforms

[ ] linux
[ x] windows
[ ] OS X
[ ] freebsd
[ ] solaris
[ ] other (please specify which)

Browsersync use-case

[ ] API
[ ] Gulp
[ ] Grunt
[x ] CLI

If CLI, please paste the entire command below

browser-sync start --proxy "http://localhost:8080/web" --files 'css/*.css'

I solve by modifying the browser-sync-client source code. But i don`t kown if it is the bast way.

Modify the following:

1. Modify browser-sync-client source code

C:\Users\Name\AppData\Roaming\npm\node_modules\browser-sync\node_modules\browser-sync-client\dist\index.js

BrowserSync.prototype.canSync = function (data, optPath) {

    data = data || {};

    if (data.override) {
        return true;
    }

    var canSync = true;

    if (optPath) {
        canSync = this.getOption(optPath);
    }

    // add: Determine whether to ignore the url
    if(this.isIgnoreUrl(data.url)) {
        return false;
    }

    return canSync && data.url === window.location.pathname;
};

// add: Determine whether to ignore the url
BrowserSync.prototype.isIgnoreUrl = function (url) {
    var ignoreUrls = this.getOption('ignoreUrls')
    for(var i in ignoreUrls) {
        if(url == ignoreUrls[i]) {
            return true;
        }
    }
    return false;
}

2. Add ignoreUrls to bs-config.js

bs-config.js:

module.exports = {

    "ignoreUrls": ["/web/index.html"],  // not reload when files change.

    "minify": false
};

3. Start BS

browser-sync start --proxy "http://localhost:8080/web" --files "bin/templates" -c bs-config.js

BrowserSync / browser-sync