在新的window.open中运行Javascript

Question

在新的window.open中运行Javascript

13

我正在运行这个函数来打开一个新窗口。

function htmlNewWindow(id) {
    var html = $(id).html();
    var newWindow = window.open('');
    newWindow.document.body.innerHTML =  '<html><head><title>Hi</title>  <script src="js/myScript.js"></script> </head>' + html;    
}

这成功地创建了一个包含HTML的新窗口。我有一堆HTML标记，当它们被点击时会运行一个叫做Foo1的函数。我尝试把整个Foo1函数打印到新的HTML文档中，并把Foo1放在myScript.js中。我在新窗口中看到了一个script标签内的Foo1，但是它们都没有加载，因为它们只被写成HTML。

- user3333134

当你将脚本分配给.innerHTML时，它们不会运行。你需要调用createElement('script')并将其添加到窗口的DOM中。 - Barmar

https://dev59.com/-nE85IYBdhLWcg3w1HGF - epascarello

3

“body.innerHTML = '<html><head>…” - 这看起来有点奇怪，不是吗？ - James Thorpe

请问能否使用innerHTML插入脚本？ - Tarang

你将一个完整的HTML文档放在另一个HTML文档的body中。你期望会发生什么？ - PM 77-1

4个回答

5

试试这个：

var newWindow = window.open('');
newWindow.document.createElement('script');
script.src = 'js/myScript.js';
newWindow.document.head.appendChild(script);

- LostMyGlasses

4

如果有人需要在链接中执行此操作，请按照以下步骤进行：

<a href="javascript: var n= window.open('/url/to/page/in/SAMEDOMAIN'); n.focus(); n.addEventListener('load', n.alert('replace this with a good thing'), true);">Link</a>

这将打开一个新窗口并跳转到指定的URL，它会将焦点设置到该窗口，并在触发“load”事件后执行函数中的代码。它只适用于在同一域中的页面。

希望这可以帮助你⬆✌。

祝好

- Andrés Villenas

2

以下是在新窗口中创建并添加脚本文件的方法：

var fileref = document.createElement('script');
//creates script in current document
fileref.setAttribute("type", "text/javascript")
//set it to JS by "type"
fileref.setAttribute("src", filename)
//set your "src=yourFile_href_Here.js" 


//Then create your newWindow as you did above, but slightly updated
//Create your function which will consume the "fileref" argument
function htmlNewWindow(fileref) {
    var newWindow = window.open('');
    newWindow.document.getElementsByTagName("head")[0].appendChild(fileref);
}; //right now the function is made but you still have to execute it

//Execute your function, and pass it the variable "fileref" that you set above.    

htmlNewWindow(fileref);
//Within this edit you will append the head element
//with your newly created script(or any other parameterized argument)

/* Replace your filename to pass any other script */

注意 - 如果没有特别允许，打开位于不同域中的页面将由于CORS (跨源资源共享) 而被拒绝(https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

如果您的域名未发送它们，请勿将脚本发送到其他人的页面或允许它们进入您自己的页面。此外，根据您的服务器/技术堆栈，您可能需要在后端堆栈中配置您的*-origin设置。请参见这里：(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

- Mike Horstmann

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

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

- Barmar · Accepted Answer

.innerHTML 添加的脚本不会被执行。需要创建一个 script 节点并将其添加到窗口的 DOM 中。

$("#button").click(newWindow);

function newWindow(id) {
  var html = $(id).html();
  var win = window.open('');
  win.document.head.innerHTML = '<title>Hi</title></head>';
  win.document.body.innerHTML = '<body>' + html + '</body>';
  var script = document.createElement('script');
  script.src = 'js/myScript.js';
  win.document.head.appendChild(script);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click me</button>

在 Stack Snippet 的沙盒中无法运行此代码，这里有一个可以工作的 jsfiddle。