Я на странице A. Ссылка нажата, и я загружаю в DOM через jQuery get со страницы B. Внутри DOM страницы B есть несколько динамически генерируемых тегов сценария с классом "dataScript" вместе с куча других тегов скриптов, с которыми я не хочу иметь ничего общего.
Единственное, что мне нужно от этого DOM - это теги .dataScript, которые я затем хочу вставить в div с идентификатором «scriptOutput» в DOM страницы A. Это не будет работать, если элемент с Класс «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, но, похоже, ничего не работает. Спасибо за ваше внимание к просмотру / ответу на мои вопросы. Я ценю вашу помощь!
UPDATE
На случай, если кто-то еще попытается сделать это, вот менее изящное, но полностью функциональное решение, которое я выбрал:
Вывод javascript в виде обычного текста (без тегов сценария) внутри одного элемента div (с идентификатором и установленным для отображения: нет) на странице B. Затем на странице 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
Спасибо Эммету за напоминание о методе document.createElement.