使用jQuery将JavaScript添加到HTML页面

Question

使用jQuery将JavaScript添加到HTML页面

3

我想在网页中添加一个javascript谷歌广告，但我无法使用jquery将javascript插入到div中。我试图用这个测试模拟我的问题，这是使用我在stackoverflow上找到的一些建议，但它不起作用。

我想要插入<script type='text/javascript'>document.write('hello world'); </ script>到div中，并在tag_1和tag_2之间显示“hello world”。

以下是代码：

<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>

感谢您的回答，

卢卡斯

- Lucas

3个回答

1

页面加载完成后，您不能再使用document.write。相反，只需插入要写入的内容即可。

<script type="text/javascript">
     $(function() { // This is equivalent to document.ready
         var str="hello world";
         $('#insert_here').append(str);
     });
</script>

- Sean Vieira

1

我找到了一个很好的解决方案：

将您的 Google Adsense 代码插入到页面的任何位置 - 例如，如果您的 CMS 只允许您将其放在右侧，则将其粘贴在那里。
使用 display:none 样式将 div 包装起来。
添加一些 jQuery 代码以将 div 移动到所需位置。

由于 JavaScript 已经运行，因此将脚本块移动到任何您想要的位置就没有问题了。

例如，如果您希望在博客中间插入 2 个 Google 广告块（如第 1 段和第 4 段之后），则这非常完美。

以下是示例代码：

<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>

顺带一提，#content 是我 CMS（Squarespace）上内容开始的位置，所以您可以将其替换为您的 CMS 上的任何内容。这很有效，且不违反 Google 的服务条款。

- Dave Hilditch

Adsense非常严格，即使display:none是无害的，也可能导致禁止。我不会尝试任何聪明的方式来展示Adsense广告。 - PJ Brunet

好的观点 - 虽然不会破坏解决方案 - 只需删除display:none - 您仍然可以使用此解决方案来加载广告并将其移动到所需位置。 - Dave Hilditch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

请参考我在这个问题的回答，了解为什么不能使用innerHTML来插入脚本元素，jQuery的函数在传递HTML字符串时会映射到此方法。如果已经完全解析文档，则document.write也会失败，详情请查看此处。

为解决此问题，您需要使用DOM函数将元素插入div中。Google广告是iframes，因此通常需要找到iframe代码并将其附加到相应位置。

要正确插入脚本元素，您需要使用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);