Question

我搜索了很多尝试为我的用户创建外部JavaScript。

我的项目是我想让我的用户使用JavaScript从我的网站上获取内容。

我希望我的代码与Google AdSense风格完全相同

<script async src="//mysite.com/api/content.js"></script>
<!-- Links add -->
<ins class="adsbygoogle"
 style="display:inline-block;width:180px;height:90px"
 data-ad-client="ca-pub-xxx"
 data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

任何人都可以请求帮助，我如何编写我的content.js（mysite.com/api/content.js）以将任何内容输出到＆＃34; ins.adsbygoogle＆＃34;类。

如果我使用document.write（＆＃34;说些什么＆＃34;）;它工作正常，但不适用于异步，它不在ins.adsbygoogle上，我想渲染它。

Answer 1

您遇到的一个问题是您的异步脚本可能会在文档中的脚本标记之后加载。解决此问题的一种方法是在运行任何代码之前侦听加载事件。 googleads代码似乎使用的替代方法是在文件末尾的异步脚本中运行一些javascript。

想象一下你有一个像这样的html页面：

<html>
  <head>
    <script async src="testasync.js"></script>
  </head>
  <body>
    <p>hello</p>
    <myblock></myblock>
    <p>done</p>
  </body>
</html>

例如，在testasync.js文件中，此代码应出现在最后，并在异步加载完成后触发要加载的所有内容：

(function(){
  addEvent(window, 'load', function(){ main_function() });

  function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
  }
})();

现在，当你的javascript加载时，这个函数将被运行，将一个事件监听器附加到页面，这样一旦页面准备就绪，你的HTML就位，你可以运行实际的功能。

在testasync.js的顶部，你的main_function将使用javascript做这样的事情，例如：

main_function = function(){
  document.getElementsByTagName('myblock')[0].innerHTML = '<p>present something here</p>';
};

此功能将显示在testasync.js文件的顶部。

如果你创建了testasync.js文件和html文件，你应该看到这个工作。

如果您需要扩展任何内容，请随时编辑此响应。

如何创建JavaScript async渲染html，如Google AdSense

1 个答案: