动态添加JavaScript覆盖HTML页面视图（而不是代码） [英] Dynamically added JavaScript overwrite the html page view (not the code)
问题描述
我的问题是我想将JavaScript添加到html页面中，这要感谢Andy E，我找到了添加我的JavaScript到HTML页面并执行。但现在我的问题是，所有的页面被JavaScript覆盖。有人知道如何做同样的事情，但没有用JavaScript覆盖页面，要添加到代码或东西来改变:)？
这是一段简短的代码，告诉我我的问题:(我改变了广告标记，因为它不是我的，所以我不能把它放在这个公共场所）
< html>
< head>
< script type =text / javascriptsrc =jquery.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{;
var correct_div = document.getElementById（'ad_468x60'）;
var sTag1 = document.createElement（script ）;
sTag1.type =text / javascript;
sTag1.text =<！ - \\\
google_ad_client = \pub-1234567890123456\; \\\
google_alternate_color = \ FFFFFF \; \\\
google_ad_width = 468; \\\
google_ad_height = 60; \\\
google_ad_format = \468x60_as\; \\\
google_ad_channel = \123456789\; \\\
google_color_border = \FFFFC6 \; \\\
google_color_bg = \FFFFFF \; \\\
google_color_link = \000000\; \\\
google_color_url = \666666\; \\\
google_color_text = \333333\ ; \\\
// - >
correct_div.appendChild（sTag1）;
var sTag2 = document.createElement（script）;
sTag2.type =text / javascript;
sTag2.src =http：//google_ad_url.js;
correct_div.appendChild（sTag2）
}）;
< / script>
< / head>
< body>
< div>
此文字在显示广告后出现并消失
< / div>
< div id =ad_468x60>
<！ - JavaScript来到这里 - >
< / div>
< / body>
< / html>
编辑：我可以使用iframe来做这件事吗？
有几件事你可以做。
-
将脚本添加到空的iframe中。这会导致iframe内容被 document.write 覆盖。您需要将iframe设置为适当的尺寸。
-
使用您自己的方法覆盖 document.write 函数。像这样：
//创建一个闭包以保留旧的document.write私有
（function（）{
var oldDW = document.write;
document.write = function（s）{
//文档尚未解析，允许document.write：
if（document.readyState！ =complete）
oldDW.call（document，s）;
//危险使用，改为使用innerHTML：
else
document.getElementById（ad_468x60）。 innerHTML = s;
}
}）（）;
正如您现在所知道的，如果有 document.write（）第二种方法不会削减它 - 您必须编写更复杂的例程来解析出脚本元素并使用document.createElement（）来代替。 - I don't want to reload the page because I don't want that the user see the page twice, if the page contain a lot of stuff it will be very inconvenient.
My problem was that I wanted to add JavaScript into a html page, thanks to Andy E, I find the way to add my JavaScript into a html page and be executed. But now my problem is that all the page is overwritten by the JavaScript. Someone know how to do the same thing but without overwritten the page with the JavaScript, something to add to the code or something to change :) ?
This is a short-code which show you my problem: (I changed the ad tag because it is not mine, so I can not put it in this public place)
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {;
var correct_div = document.getElementById('ad_468x60');
var sTag1 = document.createElement("script");
sTag1.type = "text/javascript";
sTag1.text = "<!--\ngoogle_ad_client = \"pub-1234567890123456\";\ngoogle_alternate_color = \"FFFFFF\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_channel =\"123456789\";\ngoogle_color_border = \"FFFFC6\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"000000\";\ngoogle_color_url = \"666666\";\ngoogle_color_text = \"333333\";\n//-->"
correct_div.appendChild(sTag1);
var sTag2 = document.createElement("script");
sTag2.type = "text/javascript";
sTag2.src = "http://google_ad_url.js";
correct_div.appendChild(sTag2)
});
</script>
</head>
<body>
<div>
"This text appears and disappears after the ad is displayed"
</div>
<div id="ad_468x60">
<!-- The JavaScript come here -->
</div>
</body>
</html>
EDIT : Could I use an iframe to do this ?
There's a couple of things you could do.
Add the script to an empty iframe. This would result in the iframe content being overwritten by document.write. You would need to size the iframe to the appropriate dimensions.
Override the document.write function with your own method. Something like this:
// Create a closure to keep the old document.write private (function () { var oldDW = document.write; document.write = function (s) { // Document not parsed yet, allow document.write: if (document.readyState != "complete") oldDW.call(document, s); // Dangerous use, switch to innerHTML instead: else document.getElementById("ad_468x60").innerHTML = s; } })();
As you know now, if there are any script elements written by document.write() the second method there wouldn't cut it - you'd have to write a more complex routine to parse out the script element and use document.createElement() instead.
这篇关于动态添加JavaScript覆盖HTML页面视图（而不是代码）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
