我如何运行另一个（新打开的）选项卡中的脚本？

Question

我正在尝试运行新标签页中的脚本。我使用的代码是这样的：

$ = jQuery;
function openAndPush(url, id) {
    var win = window.open('https://example.com' + url + '?view=map');
    var element = $('<script type="text/javascript">console.log("Starting magic...");var region_id='+id+';$=jQuery;var p=$(\'div["se:map:paths"]\').attr(\'se:map:paths\');if(p){console.log("Found! pushing..."); $.get(\'https://localhost:9443/addPolygon\', {id: region_id, polygon: p}, function(){console.log("Done!")})}else{console.log("Not found!");}</script>').get(0);
    setTimeout(function(){ win.document.body.appendChild(element); 
    console.log('New script appended!') }, 10000);
}

考虑以下因素：

我在中受到启发，但改用 jQuery。
我运行此代码在 inspector/console 中，来自 https://example.com 中的另一个页面（是的，实际域不是 example.com - 但目标 url 相对于原始选项卡始终位于同一域中）以避免 CORS 错误。
当我运行函数（比如 openAndPush('/target', 1)）然后在 另一个 检查器中检查代码时，一个用于 new window，控制台消息 Starting magic... 没有显示（我等了 10 秒甚至更多）。然而，新的 DOM 元素（我正在创建的这个脚本）显示在元素选项卡中（并且，在 first console/inspector 中，我可以看到 New script appended! 消息).

（在这两种情况下 jQuery 都存在，但没有占用 $ 标识符，这似乎是未定义的 - 所以我手动占用它）

我得出的结论是我的脚本没有在新 window 中执行。

我错过了什么？如何确保代码被执行？

Answer 1

不要在文档中嵌入脚本元素，而是这样做。

将您想要运行在另一个选项卡中的代码包装到一个函数中。
将包装函数绑定到新选项卡的 window
调用那个函数

这是我在控制台中运行的代码，它对我有用，即打开了另一个选项卡并显示了警报。

function openAndPush(url, id) {
    var win = window.open('https://www.google.com');
    win.test = function () {
        win.alert("Starting magic...");

    }
    win.test();
    setTimeout(function () {
        win.document.body.appendChild(element);
        console.log('New script appended!')
    }, 10000);
}

Answer 2

发现我的错误在于在创建新脚本节点时引用了原始文档，而不是目标文档（即 win.document）。我需要的是更改代码以引用新文档并直接创建节点，在 that 点中间没有 jQuery 。所以我像这样更改了我的代码：

function openAndPush(url, id) {
    var win = window.open('https://streeteasy.com' + url + '?view=map');
    var element = win.document.createElement('script');
    element.type='text/javascript';
    element.innerHTML = 'console.log("Starting magic...");var region_id='+id+';$=jQuery;var p=$(\'div[se\\:map\\:paths]\').attr(\'se:map:paths\');if(p){console.log("Found! pushing..."); $.get(\'https://localhost:9443/addPolygon\', {id: region_id, polygon: p}, function(){console.log("Done!")})}else{console.log("Not found! searched in: ", document);}'
    setTimeout(function(){ win.document.body.appendChild(element); console.log('New script appended!') }, 10000);
}

使用这段代码，本质上发生了一些事情：正在新文档的上下文中解析 JS 代码（并创建其节点）。较旧的替代方案涉及原始控制台（因为原始文档被隐式引用）。

Answer 3

将脚本发送到另一个网页是不好的做法。您可以使用复杂的 URL 传递一些查询参数，然后通过另一个网页的源代码来处理它，这样会好得多：

function doMagicAtUrlByRegionId (url, regionId) {    
  window.open(`https://example.com${url}?view=map&magic=true&region_id=${regionId}`);
}

我如何 运行 另一个（新打开的）选项卡中的脚本？

How can I run a script in another (newly-opened) tab?

javascript

window.open

我如何运行另一个（新打开的）选项卡中的脚本？