javascript - 如何在另一个(新打开的)选项卡中运行脚本？

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);
}

考虑到以下几点:

我的灵感来自 this answer ，但改用 jQuery。

我从 https://example.com 中的另一个页面在检查器/控制台中运行此代码(是的，实际域不是 example.com - 但目标 url 始终位于与原始选项卡相同的域中)以避免 CORS 错误。

当我运行该函数(例如 openAndPush('/target', 1) )然后在另一个检查器中检查代码时，其中一个用于新窗口，控制台消息 Starting magic...未显示(我等待 10 秒甚至更多)。然而，新的 DOM 元素(我正在创建的这个脚本)显示在 Elements 选项卡中(并且，在第一个控制台/检查器中，我可以看到 New script appended! 消息)。

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

我的结论是我的脚本没有在新窗口中执行。

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

Answer 1

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

将要在另一个选项卡中运行的代码包装到一个函数中。

将该包装函数绑定(bind)到新标签的窗口

调用该函数

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

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);
}