gpt4 book ai didi

jquery - 尝试从 jQuery ajax 获取响应中选择脚本标签

转载 作者:行者123 更新时间:2023-12-03 21:58:36 27 4
gpt4 key购买 nike

我在页面 A 上。单击了一个链接,然后我通过从页面 B 获取的 jQuery 加载到 DOM 中。页面 B 的 DOM 内部是多个动态生成的脚本标签,其中包含“dataScript”类和一个一堆我不想与之有任何关系的其他脚本标签。

我想要从该 DOM 得到的唯一东西是 .dataScript 标签,然后我想将其插入到页面 A 的 DOM 中 ID 为“scriptOutput”的 div 中。如果元素带有“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>

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

<小时/>

更新:

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

将 javascript 作为常规文本(无脚本标签)输出到页面 B 上的一个 div(带有 ID 并设置为 display:none)内。然后在页面 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 实际上并没有附加 <script>元素到 DOM。相反,它只是评估脚本的内容。由于它不在 DOM 中,$(data).find(".dataScript")与任何内容都不匹配。

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

查看Karl Swedberg's comment欲了解更多信息:

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.

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 - 尝试从 jQuery ajax 获取响应中选择脚本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4430707/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com