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

Question

当我移动时:

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

收件人:

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

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

style="边框:无；溢出:隐藏；宽度:500px；高度: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 文件移动到页面 correctly ？

Answer 1

当一个javascript的内容包含结束脚本标记 </script>它会导致浏览器的解析器错误地解释脚本 block 代码。

这里的代码:

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

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

");

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

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

解决方案

有两个已知的解决方案来获得 <script>...</script>脚本 block 内的字符串:

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

<script type="text/javascript">
    alert("<scr"+"ipt>...</scr"+ "ipt>");
</script>

1. 用注释 block 代码包裹整个脚本代码块:

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

Note that the second example will NOT WORK if you only have the closing-tag, since the browser will tag that closing string as the tag that was supposed to close your original opening <scrip> tag.

这个例子将不起作用:

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

专门针对您的代码 - this is the jsfiddle修复它。