尝试从jQuery ajax获取响应中选择脚本标记
我在页面A上。单击了一个链接，我通过jQuery get从页面B加载到DOM中。内部页面B的DOM是多个动态生成的脚本标记，其中包含“dataScript”类以及一堆其他脚本标签，我不想要与之相关。
我想从DOM那里得到的唯一东西就是.dataScript标签，然后我想把它插入ID为“scriptOutput”的div到页面A的DOM中。如果元素的类为“ dataScript“是一个脚本标记。 只有它是其他标签，例如“div”标签。 这是我正在尝试做的一个例子：
页面A：
Page A jQuery(function() { $("#ajaxJsLink").click(function() { $.get("https://stackoverflow.com/questions/4430707/trying-to-select-script-tags-from-a-jquery-ajax-get-response/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("https://stackoverflow.com/questions/4430707/trying-to-select-script-tags-from-a-jquery-ajax-get-response/pageB.html", function(data) { var scriptElements = $(data).find(".dataDiv").contents(); console.log(scriptElements); $(scriptElements).each(function(index) { $("#divOutput").append($(this).html()); }); }); return false; }); }); This is page A.
Get JavaScript from Page B.
Get Divs from Page B.
Script Output
Div Output
第B页：
Page B This is page B.
function someFunction() { alert("I am"); } function anotherFunction() { alert("Javascript"); } function someFunction() { alert("I am"); } function anotherFunction() { alert("Html"); }
我已经尝试为.dataScript内容添加.contents（）,. html（）和.text（），但似乎没有任何效果。 感谢您在查看/回答我的问题时考虑。 我感谢您的帮助！
更新：
如果其他人试图这样做，这是我最终得到的不那么优雅但function齐全的解决方案：
在页面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
感谢Emmett提醒我document.createElement方法。
jQuery实际上并没有将元素附加到DOM。 相反，它只是破坏了脚本的内容。 由于它不在DOM中，因此$(data).find(".dataScript")与任何内容都不匹配。
如果您确实需要标记的内容，可以尝试使用正则表达式来解析ajax响应。
查看Karl Swedberg的评论以获取更多信息：
所有jQuery的插入方法都在内部使用domManip函数在元素插入DOM之前和之后清理/处理元素。 domManip函数所做的一件事是拉出要插入的任何脚本元素，并通过“evalScript例程”运行它们，而不是将它们注入其余的DOM片段。 它单独插入脚本，对它们进行评估，然后将它们从DOM中删除。
我相信jQuery这样做的原因之一是避免在某些情况下插入脚本时Internet Explorer中可能出现的“Permission Denied”错误。 如果它位于您正在插入的包含元素内，然后在DOM中移动，它还可以避免重复插入/评估相同的脚本（这可能会导致问题）。
主要问题是……希望元素是
子元素，并使用.find()而不是.filter() 。
使用jQuery的$.get()和$.ajax() ，返回的data是文本字符串。 当您将data放入jQuery包装器$data = $(data) ，它将转换为数组： [p, div#scripts, div#divs, div#dataDiv, 。 您是否注意到元素不再是
子元素，而是在根节点？ jQuery故意这样做。
$dataScripts = $data.filter('script.dataScripts')将为我们提供一个我们现在可以迭代的集合，如下所示：
$dataScripts.each(function(i) { $('#scriptOutput').append($(this)); });
这将评估 $dataScripts的脚本，而不是像@Emmett中提到的那样将它们插入到DOM中。
如果你加载这样的AJAX结果：
function (data) { // the result is loaded in the variable 'data' }
然后将它推入这样的div：
function (data) { $("#someDiv").text(data); }
包含html标签的整个页面将作为文本放置，以便您可以看到标签。 你可以修剪页面只获得你想要的脚本，但问问自己这样做是否聪明。
问题是……如果您只是将脚本保存为外部.js文件，您可以将其作为文本加载到ajax 🙂