logo标签列表

如何防止 jQuery 移除 <script> 标签

javascriptajaxjquery
5
我该如何防止jQuery默认行为剥离我的JS代码？
function callBackFunctionLoadPage(data)
{
    var data = $(data).find('#content');
    alert($(data).html());
    $("#content").html(data);
    $("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
    //alert(url);
    loadNextBackInPage_URL = url;
    $("#page").fadeTo(100,.2);
    $.post(url,parm,callBackFunctionLoadPage);
}

在我的代码中，我想要使用 
 标签，但是 jQuery 把它们去掉了。
原始代码：
<div id="content">
            <div class="post">
                    <h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
                    <p class="meta">&nbsp;</p>
                    <div class="entry">
                      <p>&nbsp;</p>

              <div id="gallery">
                                      <img src="images/gallery/daya_240909_byreg1.jpg">
                                                <img src="images/gallery/Group 2.jpg">
                                                <img src="images/gallery/IMG00216-20101025-2001.jpg">
                                                <img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
                                                <img src="images/gallery/kannada2.jpg">
                                                <img src="images/gallery/Nayantara-Kannada.jpg">
                                                <img src="images/gallery/P1019502.jpg">
                                                <img src="images/gallery/P1019603.jpg">
                                                <img src="images/gallery/P1019643.jpg">
                                                <img src="images/gallery/P1019644.jpg">
                                                <img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
                                    </div>

<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
     $("#gallery").galleria({
        width: 500,
        height: 500
    });
</script>
          </div>
                    <p class="links">&nbsp;</p>
</div>
    </div>
    <!-- end content -->




但是从jquery来看：



<div id="content">
            <div class="post">
                    <h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>
                    <p class="meta">&nbsp;</p>
                    <div class="entry">
                      <p>&nbsp;</p>

              <div id="gallery">
                                      <img src="images/gallery/daya_240909_byreg1.jpg">
                                                <img src="images/gallery/Group 2.jpg">
                                                <img src="images/gallery/IMG00216-20101025-2001.jpg">
                                                <img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
                                                <img src="images/gallery/kannada2.jpg">
                                                <img src="images/gallery/Nayantara-Kannada.jpg">
                                                <img src="images/gallery/P1019502.jpg">
                                                <img src="images/gallery/P1019603.jpg">
                                                <img src="images/gallery/P1019643.jpg">
                                                <img src="images/gallery/P1019644.jpg">
                                                <img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
                                    </div>

         </div>
                    <p class="links">&nbsp;</p>
</div>
    </div>
    <!-- end content -->




编辑



这是我的实际 HTML 页面，正在加载。



<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Kannada on campus</title>

<meta name="keywords" content="" />

<link rel="icon" href="images/icon.jpg"/>

<meta name="description" content="" />

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

</head>

<div id="box"><a href="http://twitter.com/bedupako" target="_blank"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /></a> <a href="http://www.youtube.com/user/Bedupako" target="_blank"><img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /></a> <a href="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" target="_blank"><img src="images/Facebook Product  Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /></a> <a href="http://www.orkut.com/Community?cmm=98290522" target="_blank"><img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" /></a>

  <!--end box-->

</div>

<body>

<!-- start header -->

<div id="header">

    <div id="search"></div>

</div>

<div id="logo">

    <h1><a href="#">Kannada on campus</a></h1><br /><br />

    <h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>

    </div>

<!-- end header -->

<hr />

<!-- start page -->

<div id="page">

    <div id="menu">

        <ul>

            <li><a href="?p=ho" onclick="javascript:loadPage('?p=ho',null);return false;">Home</a></li>

            <li><a href="?p=e" onclick="javascript:loadPage('?p=e',null);return false;">Events</a></li>

            <li><a href="?p=ph" onclick="javascript:loadPage('?p=ph',null);return false;">Photos</a></li>

            <li><a href="?p=ab" onclick="javascript:loadPage('?p=ab',null);return false;">About</a></li>

            <li><a href="?p=cu" onclick="javascript:loadPage('?p=cu',null);return false;">Contact Us</a></li>

            <li><a href="other_files/change_lang.php?l=k&r=%2Fkoc%2F%3Fp%3Dph">&#3221;&#3240;&#3277;&#3240;&#3233;</a></li>

        </ul>

    </div>  <!-- start content -->



    <div id="content">

        <div class="post">

            <h1 class="title"><a href="#">Kannada on campus</a> - photos</h1>

            <p class="meta">&nbsp;</p>

            <div class="entry">

              <p>&nbsp;</p>



              <div id="gallery">

                                      <img src="images/gallery/daya_240909_byreg1.jpg">

                                                <img src="images/gallery/Group 2.jpg">

                                                <img src="images/gallery/IMG00216-20101025-2001.jpg">

                                                <img src="images/gallery/kamal-hassan-in-kannada-02.jpg">

                                                <img src="images/gallery/kannada2.jpg">

                                                <img src="images/gallery/Nayantara-Kannada.jpg">

                                                <img src="images/gallery/P1019502.jpg">

                                                <img src="images/gallery/P1019603.jpg">

                                                <img src="images/gallery/P1019643.jpg">

                                                <img src="images/gallery/P1019644.jpg">

                                                <img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">

                                    </div>



<script src="galleria/galleria-1.2.3.min.js"></script>

<script>

    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');  

     $("#gallery").galleria({

        width: 500,

        height: 500

    });

</script>

          </div>

            <p class="links">&nbsp;</p>

</div>

    </div>  

    <!-- end content -->



    <!-- start sidebar two -->

    <div id="sidebar2" class="sidebar">

        <ul>

        <li>

        <h2><a href="?p=ev">Register you event</a></h2>

        Tell us if you are conducting any kannada event and we will update it to our audience!

        </li>

            <li>

                <h2>Subscription</h2>



                      <form id="form1" method="post" action="other_files/add_mailing_list.php">

                        <label>

                          Subscribe to our mailing list:

                          <input type="text" name="sub-email" id="sub-email" />

                           <input type="submit" name="submit" id="submit" value=" Add " />

                           <input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />

                        </label>

                      </form>

                <h2>Current Events</h2>

                <ul>

                              </ul>

              <h2>archives</h2>

                <ul>

                                  <li><a href="?p=de&id=1">test</a></li>

                              </ul>

            </li>

      </ul>

</div>

    <!-- end sidebar two -->

    <div style="clear: both;">&nbsp;</div>

</div>

<!-- end page -->

<hr />

<!-- start footer -->

<div id="footer">

    <p>&copy;2011 All Rights Reserved. &nbsp;&bull;&nbsp; Designed by <a href="http://ajitah.com/" target="_blank">Ajitah</a> | <a href="humans.txt">humans.txt</a></p>

</div>

<!-- end footer --></body>

</html>

<script type="text/javascript">



  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-23549810-1']);

  _gaq.push(['_trackPageview']);



  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();



</script>
你的JS代码中哪个变量被剥离了SCRIPT标签？在通过.html(data)插入数据时，“剥离”是否发生？ - wosis
是的，时间本身确实会发生变化。 - footy
2个回答
5
我建议您采用不同的方法。首先，ajax调用很好，因为它们很轻量级，所以您可以仅获取更新后的数据并将其注入到必要的位置，而不是加载整个页面。如果您获取了一组包括脚本在内的大型标记，则实际上使用ajax执行了普通的http页面请求。这就像看到超市里的快速通道（10件或更少）比您当前站着的通道移动得更快，所以您移动到那里。但是，如果您对每个请求都这样做，最终会将快速通道变成普通通道。
从服务器获取javascript代码以执行通常意味着您对问题的思考方式不正确，因为您正在混合领域。
首先，为什么不只需在每次ajax下一页/图库时执行一个函数？为什么需要从服务器获取代码？根据我之前的观点，为什么不只获取新文件名的数组并从中构建新的图库？
如果出于某种原因您仍想以这种方式继续（我应该指出，在某些情况下，在此方式中执行代码不仅是不良习惯，而且不安全），则可以提取代码并对其进行评估：
假设只有一个代码块，并且它包含在<script></script>中（这不考虑所有种类的空格和有趣的字符）：
function callBackFunctionLoadPage(data)
{
    ...
    eval(data.match(/<script>(.*)<\/script>/im)[1]);
}

更新

jQuery会去掉JavaScript代码，但仍然会执行它：

$('#content').html('<div><script>alert("hello, world!");</script></div>');

如果脚本标签的内容已经被执行，那么几乎没有理由想要这些脚本标签本身...

更新2（给非信徒）

var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
你说得没错，但我在这里做的是加载页面的一部分，称为内容。我不是用它来显示画廊。我只是使用这段代码来在页面上获取画廊。也就是说，我正在从中加载页面的一部分，而不是画廊。 - footy
实际上它没有被更新。该脚本以美观的方式排列照片。但是如果没有执行脚本，它现在就无法工作。它只会以列的形式出现。 - footy
@footy，叹气，这就是我放置测试代码的原因，以证明它确实被执行。如果它不起作用，那肯定有其他问题，因为脚本是被执行的，你可以通过警报或日志来检查。我会进行更明确的更新来证明它。 - davin
好的，我真的不知道哪里出了问题。 我已经添加了我获取的实际页面输出并仅使用＃content部分... 你能告诉我问题出在哪里吗？ - footy
@footy，我不会为你调试问题。我的回答肯定满足了你的问题。我建议你添加一个警报并证明代码正在执行。然后逐步检查每个部分，看看哪里出了问题。如果你幸运的话，你会意识到我的第一个观点是200%正确的，你做事情的方式是错误和困难的，你不应该使用ajax导入大量的html和代码。 - davin
显示剩余2条评论
4
你尝试过使用JS的本地 innerHTML 吗？
$("#content").get(0).innerHTML = data;

如果这个方法有效，正如Davin所指出的那样，你仍然需要评估脚本：

eval(data.match(/<script>(.*)<\/script>/im)[1]);

一般来说，从 AJAX 中加载和评估 SCRIPT 应该是可行的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接