我位于A页。单击了一个链接,我通过从B页获取的jQuery get将其加载到DOM中。在B页的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方法。
发布于 2010-12-14 02:45:57
jQuery实际上不会将<script>
元素附加到DOM中。相反,它只是计算脚本的内容。因为它不在DOM中,所以$(data).find(".dataScript")
不匹配任何内容。
有关更多信息,请查看Karl Swedberg's comment:
所有jQuery的插入方法都在内部使用domManip函数在将元素插入到DOM之前和之后对其进行清理/处理。domManip函数所做的一件事就是取出要插入的任何脚本元素,并通过"evalScript例程“运行它们,而不是将它们与DOM片段的其余部分一起注入。它单独插入脚本,评估它们,然后从DOM中删除它们。
我相信jQuery这样做的原因之一是为了避免在某些情况下在Internet Explorer中插入脚本时可能发生的“权限被拒绝”错误。它还可以避免重复插入/计算相同的脚本(这可能会导致问题),前提是该脚本位于您要插入然后在DOM.中移动的包含元素中
发布于 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中。
发布于 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
复制相似问题