javascript 延迟加载使用 document.write 的双击广告的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4580456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the best way to lazy load doubleclick ads that use document.write?
提问by Joe Hanink
Ads requested via doubleclick often get served from an ad provider network that returns javascript that in turn performs document.write to place ads in the page. The use of document.write requires that the document be open, implying that the page hasn't reached document.complete. This gets in the way of deferring or lazy loading ad content. Putting such code at page bottom is helpful but doesn't do enough to lower all-important "page-loaded" time. Are "friendly iframes" the best we have? Is there any other alternative such as a clever way to override document.write that preserves the proper place in the dom?
通过双击请求的广告通常由广告提供商网络提供，该网络返回 javascript，然后执行 document.write 以在页面中放置广告。使用 document.write 需要打开文档，这意味着页面还没有达到 document.complete。这会妨碍延迟或延迟加载广告内容。将这样的代码放在页面底部是有帮助的，但不足以降低所有重要的“页面加载”时间。“友好的 iframe”是我们拥有的最好的吗？是否有其他替代方法，例如覆盖 document.write 以保留在 dom 中的正确位置的巧妙方法？
Third party ads use document.write to add script and content into the "current" location in a page. The page owner doesn't have control over ad scripts and can't specify a display target div. The ad script expects to write and render at the document position where it is called, so it's not obvious how to position the ad correctly using deferred dynamic script loading. Lazy loading script into context is straightforward, but third-party content rendered in place via document.write is not so easily achieved.
第三方广告使用 document.write 将脚本和内容添加到页面中的“当前”位置。页面所有者无法控制广告脚本，也无法指定显示目标 div。广告脚本期望在调用它的文档位置写入和呈现，因此如何使用延迟动态脚本加载正确定位广告并不明显。将脚本延迟加载到上下文中很简单，但是通过 document.write 就地呈现的第三方内容并不容易实现。
采纳答案by Joe Hanink
postscribe.js by krux, as demonstrated at the HTML5 Dev Conference.
postscribe.js 由 krux 编写，如 HTML5 开发者大会所展示。
http://krux.github.com/postscribe/doc/postscribe.htmlhttps://npmjs.org/package/postscribe
http://krux.github.com/postscribe/doc/postscribe.htmlhttps://npmjs.org/package/postscribe
回答by Gates VP
OK, so there are basically two primary ways in which an ad is rendered to the screen.
好的，所以基本上有两种主要的方式将广告呈现到屏幕上。
- Using a Javascript include and some variables.
- Using an iFrame that you place on the page.
- 使用 Javascript 包含和一些变量。
- 使用放置在页面上的 iFrame。
And honestly, the Javascript normally just renders an iFrame. Ad Networks want the iFrame b/c it gives them the easy ability to drop cookies (has this user seen this ad elsewhere on the network) and it's easy to drop impression pixels (method of counting that page was rendered).
老实说，Javascript 通常只呈现 iFrame。广告网络想要 iFrame b/c，它使他们能够轻松地删除 cookie（此用户是否在网络上的其他地方看到过此广告）并且很容易删除印象像素（计算该页面呈现的方法）。
So here's your best bet.
所以这是你最好的选择。
- Figure out the iFrame URL that is being rendered. Some networks will tell it to you directly if you ask nicely.
- Place the iFrame on your canvas / html with the appropriate size (e.g. 728x90), but point it to a known URL on your domain that is blank. (or has a background color that matches your page).
- Add the javascript that updates the SRC of the iFrame at the appropriate time.
- 找出正在呈现的 iFrame URL。如果你问得好，一些网络会直接告诉你。
- 将 iFrame 以适当的大小（例如 728x90）放置在您的画布/html 上，但将其指向您域中空白的已知 URL。（或具有与您的页面匹配的背景颜色）。
- 添加适时更新 iFrame 的 SRC 的 javascript。
iframe.src = 'myurl?'; iframe.reload();
iframe.src = 'myurl?'; iframe.reload();
That should be all that you need to do. Set it up so that everything else loads and then load the advertising iFrames last.
这应该是您需要做的全部。设置它以便加载其他所有内容，然后最后加载广告 iFrame。
Note that this may affect your revenue from the ads. It depends on the user experience, but if the ads don't load until the user has scrolled them off the screen, then you won't get clicks or make money.
请注意，这可能会影响您从广告中获得的收入。这取决于用户体验，但如果广告直到用户将它们滚动到屏幕之外才加载，那么您将不会获得点击或赚钱。
Also, keep an eye on ad network performance. I know that these guyshave pretty good response times, but there are lots of ad networks and sometimes even the big guys have crappy response times.
此外，请密切关注广告网络的性能。我知道这些家伙的响应时间非常好，但是有很多广告网络，有时甚至大公司的响应时间也很糟糕。
回答by monexus
I will give you another solution without using iframe. See http://github.com/shenjunru/LazyWrite
我将在不使用 iframe 的情况下为您提供另一种解决方案。见http://github.com/shenjunru/LazyWrite
It will help you to defer the document.write()
它将帮助您推迟 document.write()
回答by Jokin
I get used to render the ads at the bottom of the page in a hidden div and moving them with javascript.
我习惯于在隐藏的 div 中呈现页面底部的广告并使用 javascript 移动它们。
something like this wherever you want to put your ads:
像这样的东西你想把你的广告放在哪里：
<div id="destid" style="width:350px; heigh: 200px"></div>
and at the end of the page:
并在页面末尾：
<div style="display:none">
<script type="text/javascript">
document.write("<div id='srcid'>");
//your doubleclickcode
document.write("</div>");
</script>
<script type="text/javascript">
$("#srcid").appendTo("#destid");
</script>
</div>
回答by Marc Sexton
So there seems to be a standard forming around this called friendly iframes (FIF). It feels a bit like a hack but I feel better that the IAB is behind it.
所以似乎有一个围绕这个称为友好 iframe (FIF) 的标准形成。感觉有点像黑客，但我感觉更好的是 IAB 支持它。
Here's the documentation from the IAB: http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
这是 IAB 的文档：http: //www.iab.net/media/file/rich_media_ajax_best_practices.pdf
It worked for me, and even though you are writing the js dynamically into an iframe, it still allowed the rich media ads to expand outside their space.
它对我有用，即使您将 js 动态写入 iframe，它仍然允许富媒体广告扩展到它们的空间之外。
回答by atodd
The iframe method will work fine unless you are serving rich media ads. These are the type of ads that are generally flash based and, in some cases, expand out of their container. If you use iframes the rich media ads are restricted to the container (iframe).
除非您投放富媒体广告，否则 iframe 方法将正常工作。这些是通常基于 Flash 的广告类型，在某些情况下，会扩展到其容器之外。如果您使用 iframe，则富媒体广告仅限于容器 (iframe)。
The best way to accommodated all possible ads is to use the script method.
容纳所有可能的广告的最佳方法是使用脚本方法。
回答by Lorenz Meyer
I solved the problem with an iframe. I replaced the script tag with an iframe that points to a simple page on my server that contains the script tag.
我用 iframe 解决了这个问题。我用 iframe 替换了 script 标记，该 iframe 指向我的服务器上一个包含 script 标记的简单页面。
I replaced the tag
我更换了标签
<script src="ad provider's url containing document.write()" type="text/javascript">
</script>
with
和
<iframe src="adpage.htm" style="border:none;width:...height:..."></iframe>
adpage.htm simply contains:
adpage.htm 仅包含：
<html><head></head>
<body style="margin:0px;">
<script src="ad provider's url containing document.write()" type="text/javascript">
</script>
</body></html>
