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

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。
• 我从https://example.com 中的另一个页面在检查器/控制台中运行此代码（是的，实际域不是 example.com - 但目标 url 始终位于与原始选项卡相同的域中）以避免 CORS 错误。
• 当我运行该函数（例如， openAndPush('/target', 1) ）然后在另一个检查器中检查代码时，一个用于新窗口的检查器，控制台消息Starting magic...未显示（我等待了 10 秒也许更多）。 然而，新的 DOM 元素（我正在创建的这个脚本）显示在 Elements 选项卡中（并且，在第一个控制台/检查器中，我可以看到New script appended!的New script appended!消息）。

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

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

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

Answer 1

与其在脚本中嵌入脚本元素，不如将要在另一个选项卡中运行的代码包装到一个函数中并将其绑定到新选项卡的窗口中，然后调用该函数。这是我在浏览器控制台中运行的代码，它为我工作，即打开另一个选项卡并显示警报。

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 ）。 我需要的是改变以引用新的文件，并在该点的中间直接创建节点，没有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}`);
}