Running Javascript in new window.open

Question

I'm running this function to open a new window.

function htmlNewWindow(id) {
    var html = $(id).html();
    var newWindow = window.open('');
    newWindow.document.body.innerHTML =  '<html><head><title>Hi</title>  <script src="js/myScript.js"></script> </head>' + html;    
}

This successfully creates a new window with the HTML in it. I have a bunch of HTML tags which when clicked run a function called Foo1. I've tried printing the entire function of Foo1 to the new HTML document, and tried putting Foo1 inside myScript.js. I see both Foo1 inside a script tag in the new window, and but neither are loaded since they are just written to the new page as HTML.

Scripts don't run when you assign them to .innerHTML. You need to call createElement('script') and add it to the window's DOM. — Barmar
– Barmar, Commented Sep 2, 2015 at 15:35
...body.innerHTML = '<html><head>... - doesn't this look a little... odd? — James Thorpe
– James Thorpe, Commented Sep 2, 2015 at 15:36
You are putting a complete HTML document inside the body of another HTML document. What do you expect to happen? — PM 77-1
– PM 77-1, Commented Sep 2, 2015 at 15:38

Barmar · Accepted Answer · 2015-09-02 15:48:14Z

17

Scripts added with .innerHTML aren't executed. You need to create a script node and append it to the window's DOM.

$("#button").click(newWindow);

function newWindow(id) {
  var html = $(id).html();
  var win = window.open('');
  win.document.head.innerHTML = '<title>Hi</title></head>';
  win.document.body.innerHTML = '<body>' + html + '</body>';
  var script = document.createElement('script');
  script.src = 'js/myScript.js';
  win.document.head.appendChild(script);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click me</button>

This doesn't run in Stack Snippet's sandbox, here's a working jsfiddle.

answered Sep 2, 2015 at 15:48

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3333134 Over a year ago

Thanks this worked, I was looking the the wrong places for the solution. I wasn't aware I could append new node types to a new window in this manner. Thanks again!

martian17 Over a year ago

I want to know pure JS alternative to this.

Barmar Over a year ago

@Y.Yoshii Change $(id).html() to document.getElementById(id).innerHTML

LostMyGlasses · Accepted Answer · 2015-09-02 15:47:41Z

6

Try this:

var newWindow = window.open('');
newWindow.document.createElement('script');
script.src = 'js/myScript.js';
newWindow.document.head.appendChild(script);

answered Sep 2, 2015 at 15:47

LostMyGlasses

3,17423 silver badges29 bronze badges

Comments

Andrés Villenas · Accepted Answer · 2019-02-14 19:29:39Z

5

Just in case someone has this to be done in a link. Do the following:

<a href="javascript: var n= window.open('/url/to/page/in/SAMEDOMAIN'); n.focus(); n.addEventListener('load', n.alert('replace this with a good thing'), true);">Link</a>

This opens a new window with that URL, it set the focus to that windows, and as soon as the 'load' event is triggered, it executes the code in the function. It only works with a page in the same domain.

Hope this helps ⬆✌.

Cheers 👍

answered Feb 14, 2019 at 19:29

Andrés Villenas

1912 silver badges10 bronze badges

Comments

dYale · Accepted Answer · 2019-08-06 16:36:11Z

Here's how you create, and then append a script file within a new window:

var fileref = document.createElement('script');
//creates script in current document
fileref.setAttribute("type", "text/javascript")
//set it to JS by "type"
fileref.setAttribute("src", filename)
//set your "src=yourFile_href_Here.js" 


//Then create your newWindow as you did above, but slightly updated
//Create your function which will consume the "fileref" argument
function htmlNewWindow(fileref) {
    var newWindow = window.open('');
    newWindow.document.getElementsByTagName("head")[0].appendChild(fileref);
}; //right now the function is made but you still have to execute it

//Execute your function, and pass it the variable "fileref" that you set above.    

htmlNewWindow(fileref);
//Within this edit you will append the head element
//with your newly created script(or any other parameterized argument)

/* Replace your filename to pass any other script */

NOTE - Opening a page residing on a different domain, if not specifically allowed, will reject instances of this due to CORS(https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

It's not a safe practice to be sending your scripts into other people's pages or allowing them in your own if your domain hasn't sent them. Also, depending on your server/technology stack you may need to configure your *-origin settings within your backend stack. See here: (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)

Collectives™ on Stack Overflow

Running Javascript in new window.open

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related