BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.16k stars 754 forks source link

Doesn't connect correctly if page has comment containing body tag before body opening #555

Closed mettjus closed 9 years ago

mettjus commented 9 years ago

Sync doesn't start if you put an HTML comment containing the string <body> before the actual <body> opening tag. Eg:

...
    <!-- <body> -->
</head>
<body>
...

or

...
</head>
<!-- <body> -->
<body>
...
shinnn commented 9 years ago

I confirmed this problem. Thanks for reporting, @mettjus.

<html>
<!-- <body> -->
<body></body>
</html>

yields:

<html>
<!-- <body><script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.5.0.js'><\/script>".replace("HOST", location.hostname));
//]]></script> -->
<body></body>
</html>
shakyShane commented 9 years ago

This is actually expected behaviour if you consider the regex used

The simplicity of the regex pattern, matching only the first occurrence of a <body> tag, is deliberate and a direct reaction to the difficulties of using regex to match against html.

I don't believe it's wise to attempt anything more complicated than this, especially given that the regex can be overridden...

shakyShane commented 9 years ago

tl;dr - don't have a commented <body> tag, or alternatively provide a custom regex http://www.browsersync.io/docs/options/#option-snippetOptions

shakyShane commented 9 years ago

final decision: won't fix.

Sorry, but we allow you to override this functionality as stated above if needed :)

shinnn commented 9 years ago

OK, correct judgment.

ghost commented 9 years ago

Could you then please place a mention about this somewhere visibly in the docs? The problem is obviously how unintuitive it is. I simply commented out a body tag with some angular params, among x other things, and then spent an hour figuring out why it isn't reloading.

mediavrog commented 9 years ago

Also broke in combination with the Zendesk help script https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website?page=5#comment_203266588

I suggested them to adjust the script :)

You have to change

o.write('<body onload="document._l();">')

to

o.write('<' + 'body onload="document._l();">')