附加包含document.write的JS文件
[英]Appending a JS file that contains document.write
问题描述
I have a JS script that will .append() another script to the body and what it's appending looks like: 
我有一个JS脚本将.append()另一个脚本添加到body以及它附加的内容如下：
<script type=\"text\/javascript\" src=\"https:\/\/website\/creative\/camref:[ref]\/creativeref:[ref]\"><\/script>
inside this script it contains document.write() and I CANNOT modify this file. 在这个脚本里面它包含document.write() ，我不能修改这个文件。
It does not write what is inside the script to the website and how can I fix this? 它不会将脚本内部的内容写入网站，我该如何解决这个问题？ Would async work (I know about the async promise)? 异步工作（我知道异步承诺）？
1 个解决方案
解决方案1
3 2016-06-28 22:32:01
You have three options: serve , embrace , or replace . 您有三种选择： 服务 ， 拥抱或替换 。
Serve the script yourself 自己服务脚本
If you can put some code on your own server, you can have that code fetch the remote script and modify it on its way to your front-end code. 如果您可以在自己的服务器上放置一些代码，则可以使用该代码获取远程脚本并在前端代码的路上进行修改。 Your JavaScript code will use a URL on your own site instead of the remote site. 您的JavaScript代码将使用您自己网站上的URL而不是远程网站。 Your server code that handles this URL fetches the remote script and does a text replacement to change the document.write() call in the script with other code that works with your site, eg by using jQuery/DOM calls instead. 处理此URL的服务器代码将获取远程脚本并执行文本替换以更改脚本中的document.write()调用以及与您的站点一起使用的其他代码，例如通过使用jQuery / DOM调用。 Then it sends this modified script down as its own response. 然后它将此修改后的脚本作为自己的响应发送。
This can work very well, but beware of potential issues with the terms of service of the remote script, and also possible rate limiting or worse, since all the requests to the remote server will now come from your server instead of your visitors' browsers. 这可以很好地工作，但要注意远程脚本的服务条款的潜在问题，以及可能的速率限制或更糟，因为所有对远程服务器的请求现在都来自您的服务器而不是访问者的浏览器。
Embrace document.write() 拥抱document.write（）
The script you're loading from the remote server assumes it will be loaded with a direct <script> tag in your page's <body> . 您从远程服务器加载的脚本假定它将在页面的<body>加载直接<script>标记。 That's the only time document.write() works as you might expect. 这是document.write()唯一可以按预期工作的时间。 If document.write() is called from a dynamic script after the page is loaded, it wipes out the current page content, as you discovered. 如果在加载页面后从动态脚本调用document.write() ，则会消除当前页面内容，如您所发现的那样。
So instead of using .append() to load the remote script, load it the way it expects, with an actual <script> tag in the page itself. 因此，不要使用.append()来加载远程脚本，而是按照预期的方式加载它，并在页面本身使用实际的<script>标记。 Then the script's document.write() will write into the page at the point where you load it, without wiping the rest of the page. 然后脚本的document.write()将在您加载它的位置写入页面，而不擦除页面的其余部分。
But what if you need to pass dynamic parameters to the script? 但是如果你需要将动态参数传递给脚本呢？ Assuming you know or can calculate those parameters at the time the page is loaded, you can call document.write() in your own script (inline or in a .js file) to write the script tag that loads the remote script. 假设您知道或可以在加载页面时计算这些参数，您可以在自己的脚本（内联或.js文件）中调用document.write() ）来编写加载远程脚本的脚本标记。 This works just like having the remote <script> tag inline in your HTML, except you can create the URL on the fly. 这就像在HTML中内嵌远程<script>标记一样，除了您可以动态创建URL。
If you need to pass parameters to the script that aren't known until later (eg from user input into the page), or if you can't load the script until later, this won't work. 如果您需要将参数传递给脚本，直到稍后才知道（例如，从用户输入到页面中），或者如果您以后无法加载脚本，则无法执行此操作。
Example: 例：
<!-- This goes inside the <body> tag where you want the remote script. -->
<script>
var value = 'test';
document.write(
'<script src="https://example.com/script?foobar=', value,
'"><\/script>'
);
</script>
<!-- The remote script's document.write() output will go here. -->
Replace document.write() 替换document.write（）
Provide your own implementation of document.write() that uses jQuery/DOM to take the text that would have been written and insert it dynamically where you want it. 提供您自己的document.write()实现，该实现使用jQuery / DOM来获取本已编写的文本并将其动态插入到您想要的位置。
Example: 例：
// Do this in your JavaScript code immediately before using .append()
// or the like to load the remote script.
document.write = function() {
// document.write can take multiple arguments, so concatenate them.
var text = Array.prototype.slice.call( arguments ).join( '' );
// Now text is what would have been written by document.write().
// Use a DOM/jQuery/etc. call here to insert it into your page.
};
// Here is where you will load the remote script
Now when the remote script calls document.write() it will really be calling your function, so you can handle it as you want. 现在，当远程脚本调用document.write() ，它将真正调用您的函数，因此您可以根据需要处理它。
Wouldn't replacing document.write() like this possibly break other code that works and uses it legitimately? 不会像这样替换document.write()可能会破坏其他有效的代码并合法地使用它吗？ No, because any such working code would have run during page load time, otherwise it would already be broken. 不，因为任何此类工作代码都会在页面加载期间运行，否则它将被破坏。 You don't replace the function until later, when the page has been fully loaded. 在页面完全加载之后，您才能在以后更换该功能。
The main risk would be if other code you're loading also uses this same trick. 主要的风险是，如果你加载的其他代码也使用同样的技巧。 Their document.write() replacement and yours could step on each other. 他们的document.write()替换和你的可以互相踩踏。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.