尝试从jQuery ajax选择脚本标签获取响应 [英] Trying to select script tags from a jQuery ajax get response
问题描述
我在页面A上.单击一个链接，然后通过jQuery从B页获取DOM中的内容.在B页的DOM内是多个动态生成的脚本标签，其中包含"dataScript"类以及一个一堆我不想做的其他脚本标签.
I'm on page A. A link is clicked, and I'm loading in the DOM via jQuery get from page B. Inside page B's DOM are multiple dynamically-generated script tags with the class "dataScript" along with a bunch of other script tags that I don't want anything to do with.
我只想从该DOM中获取.dataScript标记，然后将其插入ID为"scriptOutput"的div到页面A的DOM中. "dataScript"的类是脚本标记.仅当它是其他一些标签(例如"div"标签)时.这是我要执行的操作的示例:
The only thing I want from that DOM are the .dataScript tags, which I then want to insert into a div with an ID of "scriptOutput" into the DOM of page A. This won't work if the element with the class of "dataScript" is a script tag. Only if it's some other tag, such as a "div" tag. Here's an example of what I'm trying to do:
页面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>
我尝试为.dataScript内容附加.contents()、. html()和.text()，但似乎没有任何效果.感谢您考虑/回答我的问题.感谢您的帮助！
I've tried appending .contents(), .html(), and .text() for the .dataScript content, but nothing seems to work. Thanks for your consideration in looking at/answering my questions. I appreciate your help!
更新:
万一有其他人尝试这样做，这是我最终得出的不太优雅但功能齐全的解决方案:
In case anyone else is trying to do this, here is the less-than-elegant but fully-functional solution I ended up with:
在页面B的一个div(具有ID并设置为display:none)内将javascript作为常规文本(没有脚本标记)输出.然后在页面A上，在get请求的回调函数中执行以下操作:
Output javascript as regular text (no script tags) inside one div (with an ID and set to display:none) on Page B. Then on Page A, do the following inside the callback function of the get request:
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方法.
Thanks to Emmett for reminding me of the document.createElement method.
推荐答案
jQuery实际上并未将<script>元素附加到DOM.相反，它只是评估脚本的内容.由于它不在DOM中，因此$(data).find(".dataScript")不匹配任何内容.
jQuery doesn't actually append <script> elements to the DOM. Instead, it just evals the contents of the script. Since it isn't in the DOM, $(data).find(".dataScript") doesn't match anything.
如果您确实需要<script>标记的内容，则可以尝试使用正则表达式来解析ajax响应.
If you really need the contents of the <script> tag, you could try using a regular expression to parse the ajax response.
查看 Karl Swedberg的评论以获取更多信息:
所有jQuery的插入方法都使用 内部的domManip函数 在之前和之后清洗/处理元素 将它们插入DOM之后. domManip的一件事 函数所做的是提取任何脚本 即将插入并运行的元素 通过"evalScript例程" 而不是给他们注入其余的 DOM片段.它插入 分别评估脚本， 然后将它们从DOM中删除.
All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.
我认为原因之一 jQuery这样做是为了避免 可能导致的权限被拒绝"错误 发生在Internet Explorer中 在某些情况下插入脚本 情况.这也避免了 反复插入/评估 相同的脚本(可能 引起问题)是否在 包含你是的元素 插入然后在周围移动 DOM.
I believe that one of the reasons jQuery does this is to avoid "Permission Denied" errors that can occur in Internet Explorer when inserting scripts under certain circumstances. It also avoids repeatedly inserting/evaluating the same script (which could potentially cause problems) if it is within a containing element that you are inserting and then moving around the DOM.
这篇关于尝试从jQuery ajax选择脚本标签获取响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
