嵌入jquery.prettyPhoto会导致脚本显示在页面上

Question

当我搬家时:

<script src="js/jquery.prettyPhoto.js"></script>

至:

<script type="text/javascript">
   ...
</script>

然后脚本从粗体部分开始显示在页面上:

style ="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency ="true"> '},s); var o = this,u = false,a,f,l,c,h,p,d = e(window).height(),v = e ...

该脚本归因于以下信息:

Class: prettyPhoto
Use: Lightbox clone for jQuery
Author: Stephane Caron (http://www.no-margin-for-errors.com)
Version: 3.1.5

如何将脚本从.js文件正确移动到页面？

Answer 1

当 a 的内容javascript包含结束脚本标记时</script>，可能会导致浏览器的解析器错误地解释脚本块代码。

代码在这里：

<script type="text/javascript">
    alert("</script>");
</script>

不起作用，您在浏览器中看到的输出将是

");

就好像浏览器读取脚本块一样

**script start tag ->** <script type="text/javascript">
    alert("</script> **<- script end tag**

解决方案

有两种已知的解决方案可以将<script>...</script>字符串放在脚本块中：

1. 将字符串分成两个单独的字符串并使用连接它们+

<script type="text/javascript">
    alert("</script>");
</script>

2. 用注释块代码包裹整个脚本代码块：

");

请注意，如果您只有结束标签，第二个示例将不起作用，因为浏览器会将该结束字符串标记为应该关闭原始开始<scrip>标签的标签。

这个例子不会工作：

**script start tag ->** <script type="text/javascript">
    alert("</script> **<- script end tag**

专门针对您的代码 -这是修复它的jsfiddle 。