How do I open a new window with CSS and JavaScript already there?

Question

Essentially I'm trying to open a new window, based on selected images from the original page.

There's a fiddle here containing what I have so far, but I'd like to be able to open the new window with a different CSS and JavaScript file.

Current JavaScript:

var tickBoxHTML = "<div class='tickBox unselected'></div>"; $("img").after(tickBoxHTML);

$(".tickBox").click(function () {
    $(this).toggleClass("tickBox selected", "tickBox unselected"); });

$("#compare").click(function () {

    var compareText = "<p>Selected images for comparison:</p>";

    $(".selected").each(function () {
        var thisSrc = $(this).prev("img").attr("src");
        var thisAlt = $(this).prev("img").attr("alt");
        compareText += "<div><img src='" + thisSrc + "' alt='" + thisAlt + "' /></div>";
    });

    compareText += "<br><button onClick='window.close()'>Close Window</button>"

    var compareWindow = window.open();
    compareWindow.document.body.insertAdjacentHTML("beforeend", compareText);

});

You could pass some arguments to the [window.open](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) method. — Teemu, Jul 13 '15 at 17:41
do you really need a new window for this? If the css already exists within the page why not just manipulate current page display? — charlietfl, Jul 13 '15 at 17:42
@charlietfl The new window is intended to have other extra functionality that I don't want in the original page, it just seemed a bit superfluous to leave it in the example. — Laurengineer, Jul 13 '15 at 17:45
How about `strUrl` to load a page with a complete HTML document, JS and CSS and all, then you can add some HTML to a newly-created window. — Teemu, Jul 13 '15 at 17:45
@Teemu if I use a specific URL I don't seem to be able to add the images the JavaScript above specifies? — Laurengineer, Jul 13 '15 at 17:49
You've to wait for the `onload` event of the newly-created window firing before adding content, and the domains must match ofcourse. — Teemu, Jul 13 '15 at 17:50

score 1 · Answer 1 · answered Jul 13 '15 at 18:19

1

You can load a page containing JS and CSS and all the elements used in a normal web page from the same domain, then wait for onload of the newly-created window to fire, and add some content after that. Something like this:

$('#compare').click(function () {
    var win = $(window.open('URL_here', 'win'));
    win.on('load', function () {
        $(this.document.body).append(compareText);
    });
});

answered Jul 13 '15 at 18:19

Teemu

22,918
7
53
106

Don't seem to be able to make this work, still. I've tried it and added a `console.log()` after each line to work out where it's getting stuck. I don't get anything after the `win.on('load',function(){` line, though. – Laurengineer Jul 31 '15 at 10:49
If you're testing [localy with Chrome](http://stackoverflow.com/questions/5660116/unsafe-javascript-attempt-to-access-frame-in-google-chrome) ... Otherways this is the way how to load content to `iframe` and get a reference to the `window` in it. – Teemu Aug 01 '15 at 05:49

score 0 · Answer 2 · answered Jul 13 '15 at 17:44

0

Just use the window.open() method with values

window.open(URL, "_blank", strWindowFeatures);

strWindowFeatures for weight or height for your new window.for example

window.open(URL, "_blank",height=570,width=520);

answered Jul 13 '15 at 17:44

lunaks

126
1
8

How do I open a new window with CSS and JavaScript already there?

2 Answers2