尝试从jQuery ajax get响应中选择脚本标记
我位于A页。单击了一个链接，我通过从B页获取的jQuery get将其加载到DOM中。在B页的DOM中，有多个动态生成的脚本标记，带有类"dataScript“以及一堆我不想用到的其他脚本标记。
我想从DOM中得到的唯一东西就是脚本标记，然后我想将它们插入到一个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>页面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>我尝试将.contents()、.html()和.text()附加到.dataScript内容中，但似乎都不起作用。感谢您在查看/回答我的问题时给予考虑。非常感谢您的帮助！
更新：
以防其他人尝试这样做，这里是我最终得到的不太优雅但功能齐全的解决方案：
在Page B上的一个div (带有ID并设置为display:none)中，将javascript作为常规文本(无脚本标记)输出。然后，在Page 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感谢Emmett提醒我使用document.createElement方法。
回答 3
Stack Overflow用户
发布于 2010-12-14 02:45:57
jQuery实际上不会将<script>元素附加到DOM中。相反，它只是计算脚本的内容。因为它不在DOM中，所以$(data).find(".dataScript")不匹配任何内容。
如果确实需要<script>标记的内容，可以尝试使用正则表达式来解析ajax响应。
有关更多信息，请查看Karl Swedberg's comment：
所有jQuery的插入方法都在内部使用domManip函数在将元素插入到DOM之前和之后对其进行清理/处理。domManip函数所做的一件事就是取出要插入的任何脚本元素，并通过"evalScript例程“运行它们，而不是将它们与DOM片段的其余部分一起注入。它单独插入脚本，评估它们，然后从DOM中删除它们。
我相信jQuery这样做的原因之一是为了避免在某些情况下在Internet Explorer中插入脚本时可能发生的“权限被拒绝”错误。它还可以避免重复插入/计算相同的脚本(这可能会导致问题)，前提是该脚本位于您要插入然后在DOM.中移动的包含元素中
Stack Overflow用户
发布于 2016-12-06 01:28:19
主要的问题是...期望<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中。
Stack Overflow用户
发布于 2010-12-14 01:45:26
如果加载AJAX结果，如下所示：
function (data) {
// the result is loaded in the variable 'data'
}然后将其推入div，如下所示：
function (data) {
$("#someDiv").text(data);
}包括html标签在内的整个页面将作为文本放置，这样您就可以看到这些标签。您可以裁剪页面以仅获取所需的脚本，但请问问自己，这样做是否很聪明。
问题是..。如果您只是将脚本另存为外部.js文件，则可以在ajax中将其加载为文本:)
https://stackoverflow.com/questions/4430707
复制相似问题