Passing a JavaScript function to run in a new window object

Question

Let's say I have a HTML string that gets passed to a new window/browser using the following method:

var htmlStr =
        "<div><button id='copy-all'>Copy all contents</button></div>" +
        "<div id='contents-container'>" +
        "    (lots of contents are placed here...) " +
        "</div>"
   , newWin = window.open("", "Test", "width=1000, height=800, scrollbars=1, resizable=1")
   , doc = newWin.document;

doc.write(htmlStr);

As you can see, there will be a button (#copy-all) along with all the contents once the HTML string is passed to the new window and rendered.

The question is - how can I attach a JavaScript function (with or without using jQuery) to the button that enables me to manipulate the DOM placed inside the div (#contents-container) element? I tried including a function literal as part of the htmlStr variable but it doesn't seem to be a viable option.

like doc.getElementById('copy-all').onclick = function() { alert('hi') };? — Fabricator
– Fabricator, Commented Jan 19, 2015 at 21:30

Mario A · Accepted Answer · 2015-01-19 21:45:27Z

2

With jQuery I would do it like this:

$('#copy-all', doc).on('click', function() {
    $('#contents-container', doc).html('test');
});

Here is a working JSFiddle: http://jsfiddle.net/qd8dybg0/2/ (don't forget to disable your popup blocker)

edited Jan 19, 2015 at 21:45

answered Jan 19, 2015 at 21:39

Mario A

3,3711 gold badge20 silver badges25 bronze badges

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

Comments

Ruzihm · Accepted Answer · 2019-10-10 07:17:46Z

1

A variant of Mario A's answer which uses jQuery that does not use jQuery:

doc.getElementById("copy-all").onclick = function(event) {
    doc.getElementById("contents-container").innerHTML = 'test';
};

And a demo JSFiddle (disable popup blocker to see demo): http://jsfiddle.net/kv2p8dwe/2/

edited Oct 10, 2019 at 7:17

answered Oct 10, 2019 at 7:06

Ruzihm

20.4k5 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

Passing a JavaScript function to run in a new window object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related