代码之家 › 专栏 › 技术社区 › Luis Masuelli

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

window.open javascript

Luis Masuelli · 技术社区 · 7 年前

我正在尝试在新选项卡中运行脚本。我使用的代码是:

$ = 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元素(我正在创建的脚本)显示在元素选项卡(以及第一控制台/检查员,我可以看到 New script appended! 消息)。

(在两种情况下 jQuery 存在,但不占用 $ 标识符,似乎未定义-因此我手动占用它)

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

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

2 回复 | 直到 7 年前

Bilal Alam 7 年前

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

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

Luis Masuelli 7 年前

发现我的错误在于创建新脚本节点时引用的源文档,而不是目标文档(即 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);
}

有了这段代码,事情就基本上发生了: 正在新文档的上下文中分析(及其创建的节点) . 旧的替代方案涉及源站控制台(因为源站文档被隐式引用)。