javascript document.write 在外部js文件中
在处理大型、高负载的项目时,我遇到了论坛和博客上数十亿个主题中已经描述的问题,但没有解决方案对我的情况有帮助。 故事是这样的。
我有横幅的 HTML 代码,我不知道代码是什么。 有时它是纯 HTML,但有时它是 标记,其中包含 document.write 以及
标记,其中包含 src 以双击网络。
所以我们有: script > 文档.写入> 脚本(双击)。
正如您所知,doubleclick Network 也使用 document.write,并且大多数时候它们会提供需要加载另一个 js 文件的 Flash 横幅。
所以毕竟我们有: script > 文档.写入> 脚本(双击)> 文档.写入> 脚本> ...
当您直接将其放入 HTML 中时,效果很好。 页面渲染1部分,加载banner1,继续渲染页面,加载banner2,完成页面渲染。
但现在我需要首先渲染页面,并且仅在加载横幅之后才渲染页面。 由于横幅使用 document.write 我需要在 window.onload 事件之前加载它(注意:在 window.onload document.write 之后将重写整个文档。)
我所做的:
在 head 部分我有一个横幅对象(真实命名空间)有点巨大:)),具有属性范围。
当页面渲染和横幅代码满足时,我将横幅的代码放入范围中并放入 - 所以这里我需要为了稍后将横幅内容放在
呈现的页面上和 标记之前,我放置了
banners.load 方法对作用域数组中的每个项目执行此操作:
document.write('<div id="codeHolder'+id+'">');
document.write(bannerCode);
document.write('</div>');
只有在此之后,我才有 window.onload()
事件执行此操作:
获取所有横幅 codeHolder 并逐个节点将其节点从 codeHolder 附加到 placeHolder,所以结果我在渲染页面后加载了横幅,并且横幅位于正确的位置。
除了 IE 之外,一切都很完美,它加载以异步方式动态放入 DOM 中的任何 js 脚本,因此双击脚本内的 document.write 将节点附加到文档的末尾,而不是在我的 codeHolder 节点中。 像往常一样,它仅在 IE 中。
我将非常感谢任何可能知道解决方案的人。
Working on big, high loaded project I got the problem that already described in billion of topics on forums and blog, but there is no solution that will help in my case. Here is the story.
I have the HTML code of banner, I don't know what is the code. Sometimes it's plain HTML, but sometimes it's <script>
tag with document.write inside it with <script>
tag that has src to doubleclick network in it.
So we have: script > document.write > script(doubleclick).
doubleclick network, as you may know, use document.write too and most of the time they give flash banners that need to load one more js file.
So after all we have: script > document.write > script(doubleclick) > document.write > script > ...
This works good when you place it in HTML directly. Page rendering 1 part, load banner1, keep rendering page, load banner2, finalizing page rendering.
But right now I need to render page first and only after that load banners.
As banner use document.write I need to load it before window.onload event (note: after window.onload document.write will rewrite whole document.)
What I've done:
In the head section I have an banners object(real namespace kind of huge :)), with property scope.
When page rendering and banner code is meet I place the code of the banner into the scope and put <div id="bannerPlaceHolder"+id></div>
-- so here I will need to put banner content later on
Page rendered and before </body>
tag I put <script>banners.load()</script>
banners.load method do this for each item in scope array:
document.write('<div id="codeHolder'+id+'">');
document.write(bannerCode);
document.write('</div>');
And only after this I have window.onload()
event that do this:
take all banners codeHolders and node-by-node append it nodes from codeHolder to placeHolder, so in result I have loaded banners after rendering the page and banners are on the right places.
All is perfect except IE, it load any js script that was putted in DOM dynamically in asynchron way, so document.write inside doubleclick scripts append nodes to the end of the document and not in my codeHolder nodes. As usual it's only in IE.
I will be really appreciated to anyone who may know the solution.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
你需要 writeCapture.js (全面披露:我是作者。)所有赌注都与第三个有关派对脚本。 今天他们使用
document.write
生成一些特定的 HTML,但明天他们可能会更改它,并且任何基于替换document.write
的简单黑客都需要更新。 writeCapture 负责处理这个问题。 您的用法类似于:该库可以处理任意深度的脚本标记,并且可以很好地处理散布的 HTML。 如果您不使用 jQuery,它还有一个独立的构建。
You need writeCapture.js (full disclosure: I'm the author.) All bets are off with 3rd party scripts. Today they use
document.write
to generate some specific HTML, but tomorrow they could change it and any simple hacks based on replacingdocument.write
will need to be updated. writeCapture takes care of that. Your usage would be something like:The library can handle any arbitrary depth of script tags and does just fine with interspersed HTML. It also has a standalone build if you don't use jQuery.
通常,对于横幅,您会知道确切的尺寸和位置,因此如何动态创建一个 iframe,其内容就是您在bannerCode 中拥有的内容,仅此而已。
Typically with banners you'll know the exact dimensions and placement, so how about creating an iframe dynamically with the content being what you have in bannerCode and that's all.
也许你可以使用属性innerHTML:
document.getElementById("x").innerHTML=".................";
或者你可以使用 DOM:CreateElement 和 AppendChild
perhaps you could use the property innerHTML:
document.getElementById("x").innerHTML=".................";
Or you could you the DOM: CreateElement and AppendChild
将其加载到隐藏的(大小0x0)iframe中,然后使用javascript将其移动到其他地方
load it into a hidden (size 0x0) iframe, then move it elsewhere with javascript
我认为 iframe 解决方案很丑陋。 为什么不能将横幅加载到单独的页面中并通过 AJAX 将它们加载到 DIV 中?
I think iframe solution is ugly. Why cant you load the banners into a separate page and AJAX them into a DIV?
将 document.write() 调用拆分为单独的标签,因此输出应如下所示:
document.write('');
document.write(bannerCode);
document.write('');
IE 将等待 document.write(bannerCode) 准备好并写入结束标记。
Split the document.write()-calls in separate -tags, so the output should look like:
document.write('');
document.write(bannerCode);
document.write('');
The IE will wait for document.write(bannerCode) is ready and when writes the closing -tag.