使用jQuery将JavaScript添加到HTML页面
[英]add javascript into a html page with jquery
问题描述
I want to add a javascript google ad but I can't insert the javascript into the div using jquery. 
我想添加一个javascript Google广告，但无法使用jquery将javascript插入div中。 I try to simulate my problem with this test, which is using some advice I found on stackoverflow , but it does not work. 我尝试使用此测试来模拟我的问题，该测试使用的是我在stackoverflow上发现的一些建议，但它不起作用。
I want <script type='text/javascript'>document.write('hello world');</script> to be inserted in the div, and "hello world" be displayed between the tag_1 and tag_2. 我希望将<script type='text/javascript'>document.write('hello world');</script>插入div，并在tag_1和tag_2之间显示“ hello world”。
Here is the code : 这是代码：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str="<script type='text/javascript'>document.write('hello world');";
str+="<";
str+="/script>";
$('#insert_here').append(str);
});
</script>
</head>
<body>
tag_1<br/>
<div id="insert_here">
</div>
tag_2<br/>
</body>
</html>
Tanks for your answers, 坦克为您的答案，
Lucas 卢卡斯
3 个解决方案
解决方案1
2 2010-08-05 18:51:01
See my answer to Are dynamically inserted <script> tags meant to work? 请参阅我的答案： 动态插入的<script>标签是否有效？ for why you can't use innerHTML , which jQuery's functions map to when passed a HTML string, to insert a script element. 为什么您不能使用innerHTML （当传递HTML字符串时jQuery的函数会映射到它）来插入脚本元素。 document.write will also fail when used after the document has been fully parsed . 在完全解析文档后使用 document.write也会失败。
To work around this, you will have to use DOM functions to insert an element into the div. 要解决此问题，您将必须使用DOM函数将元素插入div。 Google ads are iframes, so it's usually a case of finding the iframe code and appending that instead. Google广告是iframe，因此通常是查找iframe代码并附加该代码的情况。
To correctly insert a script element, you need to use DOM functions, for instance:
要正确插入脚本元素，您需要使用DOM函数，例如：
var txt = 'alert("Hello");'; var scr = document.createElement("script"); scr.type= "text/javascript"; // We have to use .text for IE, .textContent for standards compliance. if ("textContent" in scr) scr.textContent = txt; else scr.text = txt; // Finally, insert the script element into the div document.getElementById("insert_here").appendChild(scr);
解决方案2
1 2010-08-05 18:47:49
You cannot use document.write after the page has finished loading. 页面加载完成后，您将无法使用document.write 。 Instead, simply insert the contents that you want to be written in. 相反，只需插入要写入的内容。
<script type="text/javascript">
$(function() { // This is equivalent to document.ready
var str="hello world";
$('#insert_here').append(str);
});
</script>
解决方案3
1 已采纳 2012-02-28 17:17:52
I figured out a great solution: 我想出了一个很好的解决方案：
- Insert your Google Adsense code anywhere on your page - eg if your CMS only allows you to put this on the right hand side then stick it there. 将您的Google Adsense代码插入页面的任何位置-例如，如果CMS仅允许您将其放在右侧，然后粘贴在此处。
- Wrap a div around it with
display:nonestyle用display:none样式将div环绕在它周围 - Add some jquery code to move the div to the location you desire. 添加一些jquery代码以将div移动到所需的位置。
Since the javascript has already run there is no problem then with moving the block of script to wherever you'd like it to be. 由于javascript已经运行，因此将脚本块移动到您希望的任何位置都没有问题。
eg if you wish to put 2 blocks of google adverts interspersed throughout your blog (say after paragraph 1 and after paragraph 4) then this is perfect. 例如，如果您希望在整个博客中穿插2个Google广告块（例如在第1款之后和第4款之后），那么这是完美的。
Here's some example code: 这是一些示例代码：
<div id="advert1" style="display:none">
<div class="advertbox advertfont">
<div style="float:right;">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* Video box */
google_ad_slot = "xxxxxxxxxxxxxxxxx"
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#advert1').appendTo("#content p:eq(1)");
$('#advert1').css("display", "block");
});
</script>
ps #content happens to be where the content starts on my CMS (Squarespace) so you can replace that with whatever you have in your CMS. ps #content恰好是内容在我的CMS（方形空间）上开始的位置，因此您可以将其替换为CMS中的内容。 This works a treat and doesn't break Google ToS. 这很有效，并且不会破坏Google ToS。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.