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

Question

I am trying to run a script in a new tab. The code I use is this:

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

Considering the following:

I was inspired in this answer, but used jQuery instead.
I run this code in an inspector/console, from another page in https://example.com (yes, the actual domain is not example.com - but the target url is always in the same domain with respect to the original tab) to avoid CORS errors.
When I run the function (say, openAndPush('/target', 1)) and then inspect the code in another inspector, one for the new window, the console message Starting magic... is not shown (I wait the 10 seconds and perhaps more). However the new DOM element (this script I am creating) is shown in the Elements tab (and, in the first console/inspector, I can see the New script appended! message).

(In both cases jQuery is present, but not occupying the $ identifier, which seems to be undefined - so I manually occupy it)

What I conclude is that my script is not being executed in the new window.

What am I missing? How can I ensure the code is being executed?

I'm confused on your second point. Do you mean that you are running a script on domain `aaa.com` that opens a window to `bbb.com` and then adds a ` — zero298, Jul 12 '18 at 16:41
No. The domain is always the same. I just changed it to example.org — Luis Masuelli, Jul 12 '18 at 16:44
This answer https://stackoverflow.com/questions/1199676/can-i-create-script-tag-by-jquery seems to indicate that you can't do it the way you show, but must build and append a node. I seem to recall that scripts are not evaluated when injected as html, perhaps because the DOM is not reloaded and doesn't load and parse the script... no onLoad event fires to pick it up... or so I recall. — J E Carter II, Jul 12 '18 at 16:55

Bilal Alam · Accepted Answer · 2021-12-01T16:57:38.150

13

Instead of embedding script element in the document, do this.

wrap the code that you want to run in another tab, into a function.
bind that wrapped function to the new tab's window
Call that function

Here's the code that I ran in my console and it worked for me i.e another tab was opened and alert was displayed.

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

edited Dec 01 '21 at 16:57

answered Jul 12 '18 at 17:47

Bilal Alam

874
10
26

Yes, you are right. I thought I could not read the contents of the window but I forgot the CORS policies allow me that on same domain (At least, in this case). I can safely scrap the DOM there. – Luis Masuelli Jul 12 '18 at 17:56

score 1 · Answer 2 · answered Jul 12 '18 at 17:52

Found that my error consisted on the origin document being referenced when creating a new script node, instead of the target document (i.e. win.document). What I needed is to change the code to reference the new document and create the node directly, no jQuery in the middle at that point. So I changed my code like this:

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

With this code something is essentially happening: The JS code is being parsed (and its node created) in the context of the new document. Older alternatives involved the origin console (since the origin document was implicitly referenced).

Aleksandr Savkin · Answer 3 · 2021-09-19T01:08:49.287

-2

It's bad practice to send scripts to another webpage. You can pass some query params using a complicated URL and handle it by a source code from another webpage, it's much better:

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

edited Sep 19 '21 at 01:08

answered Sep 19 '21 at 00:57

Aleksandr Savkin

315
1
7

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

3 Answers3

Linked