Question

我在页面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>

Page 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>

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

更新

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

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

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

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

Answer 1

jQuery实际上并没有将<script>元素附加到DOM。相反，它只是破坏了脚本的内容。由于它不在DOM中，$(data).find(".dataScript")与任何内容都不匹配。

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

查看Karl Swedberg's comment了解详情：

所有jQuery的插入方法都使用   内部的domManip函数   在和之前清理/处理元素   将它们插入DOM后。   domManip的其中一件事   函数确实是拉出任何脚本   即将插入和运行的元素   他们通过“evalScript例程”   而不是注入其余的   DOM片段。它插入了   脚本分开，评估它们，   然后将它们从DOM中删除。
     我相信其中一个原因   jQuery这是为了避免   “Permission Denied”错误可以   在Internet Explorer中发生   在某些情况下插入脚本   情况。它也避免了   反复插入/评估   相同的脚本（这可能是潜在的   引起问题）如果它在一个   包含你的元素   插入然后移动   DOM。

Answer 2

主要问题是......期望<script>元素成为<div id='scripts'>的子元素，并使用.find()代替.filter()。

使用jQuery的$.get()和$.ajax()时，返回的data是一个文本字符串。将data放入jQuery包装器$data = $(data)时，它将转换为数组：[p, div#scripts, div#divs, div#dataDiv, <script.dataScript>, <script.dataScript>]。您是否注意到<script>元素不再是<div id='scripts'>的子元素，而是根源？ jQuery故意这样做。

$dataScripts = $data.filter('script.dataScripts')将为我们提供一个我们现在可以迭代的集合：

$dataScripts.each(function(i) {
    $('#scriptOutput').append($(this));
});

这将评估 $dataScripts中的脚本，而不是像提到的@Emmett那样将它们插入到DOM中。

Answer 3

如果你加载这样的AJAX结果：

function (data) {
 // the result is loaded in the variable 'data'
}

然后将其推入这样的div：

function (data) {
 $("#someDiv").text(data);
}

包含html标签的整个页面将作为文本放置，以便您可以看到标签。你可以修剪页面只获得你想要的脚本，但问问自己这样做是否聪明。

事情是......如果您只是将脚本保存为外部.js文件，您可以将其作为文本加载到ajax中：）

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

3 个答案: