尝试从jQuery ajax get响应中选择脚本标记

Question

尝试从jQuery ajax get响应中选择脚本标记

我在页面A上.单击了一个链接,我通过jQuery get从页面B加载到DOM中.内部页面B的DOM是多个动态生成的脚本标记,其中包含"dataScript"类以及一堆其他脚本标签,我不想要任何事情.

我想从DOM那里得到的唯一东西是.dataScript标签,然后我想将其插入ID为"scriptOutput"的div到页面A的DOM中.如果元素的类为" dataScript"是一个脚本标记.只有它是其他标签,例如"div"标签.这是我正在尝试做的一个例子:

页面A:

<html>
<head>
<title>Page A</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
 $("#ajaxJsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataScript").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#scriptOutput").append($(this).html());
   });
  });
  return false;
 });
 $("#ajaxDivsLink").click(function() {
  $.get("pageB.html", function(data) {
   var scriptElements = $(data).find(".dataDiv").contents();
   console.log(scriptElements);
   $(scriptElements).each(function(index) {
    $("#divOutput").append($(this).html());
   });
  });
  return false;
 });
});
</script>
</head>
<body>
<p>This is page A.</p>
<hr />
<p>
<a href="pageB.html" id="ajaxJsLink">Get JavaScript from Page B.</a><br />
<a href="pageB.html" id="ajaxDivsLink">Get Divs from Page B.</a>
</p>
<hr />
<div id="scriptOutput">
 <h2>Script Output</h2>
</div>
<div id="divOutput">
 <h2>Div Output</h2>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

第B页:

<html>
<head>
<title>Page B</title>
</head>
<body>
<p>This is page B.</p>
<div id="scripts">
 <script type="text/javascript" class="dataScript">
  function someFunction() {
   alert("I am");
  }
 </script>
 <script type="text/javascript" class="dataScript">
  function anotherFunction() {
   alert("Javascript");
  }
 </script>
</div>
<div id="divs">
 <div class="dataDiv">
  <div>
   function someFunction() {
    alert("I am");
   }
  </div>
 </div>
 <div class="dataDiv">
  <div>
   function anotherFunction() {
    alert("Html");
   }
  </div>
 </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我尝试为.dataScript内容附加.contents(),. html()和.text(),但似乎没有任何效果.感谢您在查看/回答我的问题时考虑.我感谢您的帮助!

更新:

如果其他人试图这样做,这是我最终得到的不那么优雅但功能齐全的解决方案:

在页面B上的一个div(带有ID并设置为display:none)内输出javascript作为常规文本(无脚本标记).然后在页面A上,在get请求的回调函数中执行以下操作:

var docHead = document.getElementsByTagName("head")[0]; //head of Page A
var newScript = document.createElement("script");
newScript.setAttribute("type","text/javascript");
newScript.innerHTML = jQuery(data).find("#divWithPlainTextJs").text(); //insert plain text JS into script element
docHead.appendChild(newScript); //append script element to head of Page A
jQuery("#divWithPlainTextJs").remove(); //remove the plain text div and JS from the DOM

Run Code Online (Sandbox Code Playgroud)

感谢Emmett提醒我document.createElement方法.

Answer 1

Emm*_*ett 11

jQuery实际上并没有将<script>元素附加到DOM.相反,它只是破坏了脚本的内容.因为它不在DOM中,$(data).find(".dataScript")所以不匹配任何东西.

如果您确实需要<script>标记的内容,可以尝试使用正则表达式来解析ajax响应.

查看Karl Swedberg的评论以获取更多信息:

所有jQuery的插入方法都在内部使用domManip函数来清理/处理元素插入DOM之前和之后.domManip函数所做的一件事就是拉出要插入的任何脚本元素,并通过"evalScript例程"运行它们,而不是将它们注入其余的DOM片段.它单独插入脚本,对它们进行评估,然后将它们从DOM中删除.

我相信jQuery这样做的原因之一是避免在某些情况下插入脚本时Internet Explorer中可能出现的"Permission Denied"错误.如果它位于您正在插入的包含元素内,然后在DOM中移动,它还可以避免重复插入/评估相同的脚本(这可能会导致问题).

归档时间：	15 年，2 月前
查看次数：	15771 次
最近记录：	9 年，3 月前