11

This question asks for a way to open a new window using window.open and then inject it with a script. It was not possible because of cross-domain security issues.

However, my problem is that I want to do the exact same thing, except from the same domain to the same domain. Is this possible?

Note that .write does not solve this problem because it wipes all the html from the page first.

3 Answers 3

13

You can do something like this:

var theWindow = window.open('http://stackoverflow.com'),
    theDoc = theWindow.document,
    theScript = document.createElement('script');
function injectThis() {
    // The code you want to inject goes here
    alert(document.body.innerHTML);
}
theScript.innerHTML = 'window.onload = ' + injectThis.toString() + ';';
theDoc.body.appendChild(theScript);

This also seems to work:

var theWindow = window.open('http://stackoverflow.com'),
    theScript = document.createElement('script');
function injectThis() {
    // The code you want to inject goes here
    alert(document.body.innerHTML);
}
// Self executing function
theScript.innerHTML = '(' + injectThis.toString() + '());';
theWindow.onload = function () {
    // Append the script to the new window's body.
    // Only seems to work with `this`
    this.document.body.appendChild(theScript);
};

And if for some reason you want to use eval:

var theWindow = window.open('http://stackoverflow.com'),
    theScript;
function injectThis() {
    // The code you want to inject goes here
    alert(document.body.innerHTML);
}
// Self executing function
theScript = '(' + injectThis.toString() + '());';
theWindow.onload = function () {
    this.eval(theScript);
};

What this does (Explanation for the first bit of code. All examples are quite similar):

  • Opens the new window
  • Gets a reference to the new window's document
  • Creates a script element
  • Places all the code you want to 'inject' into a function
  • Changes the script's innerHTML to load said function when the window loads, with the window.onload event (you can also use addEventListener). I used toString() for convenience, so you don't have to concatenate a bunch of strings. toString basically returns the whole injectThis function as a string.
  • Appends the script to the new window's document.body, it won't actually append it to the document that is loaded, it appends it before it loads (to an empty body), and that's why you have to use window.onload, so that your script can manipulate the new document.

It's probably a good idea to use window.addEventListener('load', injectThis.toString()); instead of window.onload, in case you already have a script within your new page that uses the window.onload event (it'd overwrite the injection script).

Note that you can do anything inside of the injectThis function: append DIVs, do DOM queries, add even more scripts, etc...

Also note that you can manipulate the new window's DOM inside of the theWindow.onload event, using this.

4
  • 2
    Works on FF. Chrome? No. Commented Mar 9, 2018 at 7:48
  • Doesn't work on google web apps, i tried to remove some elements to make my popup easier to read ( here are few of my attempts: jsfiddle.net/uzdxrp2v/39 ) seems like google is using some sort executing order hook, were the first ggl loaded script will remove any script before it. Although all other domains i have tried are working pretty good.
    – Vlad
    Commented Jun 13, 2018 at 6:14
  • is still running? i can't make.
    – PeterPam
    Commented Apr 12, 2019 at 17:50
  • is it still working, not for me.jsfiddle.net/Lgnomxj2
    – nisar
    Commented Oct 26, 2021 at 5:55
0

Yes...

var w = window.open(<your local url>);
w.document.write('<html><head>...</head><body>...</body></html>');
4
  • This wipes the webpage until there is nothing to inject anymore.
    – user2490157
    Commented Apr 28, 2015 at 3:56
  • This was a simple example. Once you have the document object, you can manipulate it just like any other document object. Keep in mind however, that you will need to wait until the DOM is loaded before you can start manipulating it. Commented Apr 28, 2015 at 4:14
  • No, whenever you use .write it will clear all content from your destination first. It doesn't matter what you're doing - this doesn't work.
    – user2490157
    Commented Apr 28, 2015 at 23:57
  • Once the DOM is loaded you can use any Document method, again, this was just a simple example. You can use w.document.createElement, w.document.appendElement, w,document.getElementById, etc. If you don't want to write a brand new document, then you do not want to use write, but access to the DOM is available using this method. Commented Apr 29, 2015 at 2:10
0

Here's a trick I use, it uses query strings, and is client side. Not perfect but it works:

On the sending page, do:

var javascriptToSend = encodeURIComponent("alert('Hi!');");
window.open('mypage.html?javascript=' + javascriptToSend);

Replace mypage.html with your page. Now on the receiving page, add:

(location.href.match(/(?:javascript)=([^&]+)/)[1])&&eval(decodeURIComponent(location.href.match(/(?:javascript)=([^&]+)/)[1]));

You'll have to do some back-and forth to make sure this works.


If you HAVE PHP you can use this more reliable solution on the receiving page:

eval(decodeURIComponent(<?=$_GET['javascript'] ?>));
1
  • And how to accomplish this on blank window window.open("")?
    – Suncatcher
    Commented Nov 1, 2017 at 16:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.