Execute command on another tab

Question

I'm new at JavaScript, so can someone help me? How can I execute a command on another tab? For example, I have opened new tab from my main tab and opened translate.com (just for textbox) on it, and the problem is I don't know how to put text in search textbox?

I open the page with this command:

var page = window.open('https://www.translate.com/');

On the page, I can enter text with this code:

$string1 = $("#source_text");
$string1.val("text");

I have tried this, but this code doesn't work the way I want it to.

var page = window.open('https://www.translate.com/');
setTimeout(function(){page.f1()},20000);
setTimeout(function(){page.close()},30000);
function f1() {
	$string1 = $("#source_text");
	$string1.val("ka tu");

}

Answer 1

I find the function that you are trying to run very abnormal. So, let's start with small steps.

The page.close() function is perfect you can do that and it works. The other part won't work first of all because the page object created by window.open has no function called f1 on it.

Furthermore it is very important from where you are trying to run the script on the other window you always must take into consideration the cross-origin limitations. Easily explained if you try to run a function from a google.com tab on a separate window yahoo.com it won't work this is a security issue.

In order to run function f1 in that window it is important that f1 function is declared globally and ussualy you try and do this the following way page.window.f1() - and there you have it. So for example your code would be

page.window.$("#source_text").val('something');

refactoring your code would be like this:

var page = window.open('https://www.translate.com/');
setTimeout(function(){ page.window.$("#source_text").val('something');},20000);
setTimeout(function(){page.close()},30000);

open translate.com in a tab open dev tools in chrome and paste the above code in the console tab and see the results, it will work.

I recommend that before running code in another window you should check that that window is loaded first of all (in your case works) because of the long timeout.

A better solution would be using HTML5's postMessage API: check this link here for a good tutorial: https://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/ - also this meens of course that the window you are opening is listening for some sort of postMessages.

In general you do this things with hosts that you manage and not other hosts because it might not work always. Also it will always work if you are on a host and open the same host in another window otherwise you end up with this security error: VM88:2 Uncaught SecurityError: Blocked a frame with origin "https://some_other_host" from accessing a frame with origin "https://www.translate.com". Protocols, domains, and ports must match.

Hope this helps, and you understand the way it works now.

Cheers