Open a new javascript window(.open) along with its CSS styling

javascript window.open style
javascript popup window onclick
window.open callback
javascript open url in modal window
window.open not working in chrome
window.open new tab
window.open alternative
window.open download file

I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.

Here's the little bit I've got 'till now:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.

Thanks in advance!


Build a complete HTML page in the opened window and reference your CSS-file there:

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();

Popup Windows, The purpose of this function is to only (physically) print the contents of a child div which is Open a new javascript window(.open) along with its CSS styling. Optional. Specifies the URL of the page to open. If no URL is specified, a new window/tab with about:blank is opened: name: Optional. Specifies the target attribute or the name of the window. The following values are supported: _blank - URL is loaded into a new window, or tab. This is default; _parent - URL is loaded into the parent frame


I do something similiar to the above example but found it doesn't work in all browsers. The following was tested with all the major browsers and works for me. (Remember, some styles can be dependent on parent elements, so if your div is nested inside those elements the styles may not look exactly the same in the print window as on your parent page)

function printWithCss() {
        //Works with Chome, Firefox, IE, Safari
        //Get the HTML of div
        var title = document.title;
        var divElements = document.getElementById('printme').innerHTML;
        var printWindow = window.open("", "_blank", "");
        //open the window
        printWindow.document.open();
        //write the html to the new window, link to css file
        printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
        printWindow.document.write(divElements);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.focus();
        //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
        setTimeout(function() {
            printWindow.print();
            printWindow.close();
        }, 100);
    }

Window open() Method, With JavaScript you can specify the dimensions, position and visible toolbars of this as well as writing code directly into it and having the two windows operating together. Opening new windows is easy enough in plain old HTML, using the target Throughout the examples above I've been using the javascript: link style. The syntax to open a popup is: window.open(url, name, params): url An URL to load into the new window. name A name of the new window. Each window has a window.name, and here we can specify which window to use for the popup. If there’s already a window with such name – the given URL opens in it, otherwise a new window is opened. params


I wanted to have all the styles from the parent page and print. So I wanted to use all the css links in the HEAD.

My solution uses jQuery.

(function print() {
    // getting the tag element I want to print
    // cloning the content so it doesn't get messed
    // remove all the possible scripts that could be embed
    var printContents = $('body').clone().find('script').remove().end().html();

    // get all <links> and remove all the <script>'s from the header that could run on the new window
    var allLinks = $('head').clone().find('script').remove().end().html();

    // open a new window
    var popupWin = window.open('', '_blank');
    // ready for writing
    popupWin.document.open();

    // -webkit-print-color-adjust to keep colors for the printing version
    var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';

    // writing
    // onload="window.print()" to print straigthaway
    popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');

    // close for writing
    popupWin.document.close();
})();

Window Object, The open() method opens a new browser window, or a new tab, depending on your If no URL is specified, a new window/tab with about:blank is opened. Tenho uma página da qual eu preciso imprimir apenas uma parte, utilizei o window.open seguido de um window.print para isso, só que a impressão não sai no formato esperado, é um formulário e deve ser


I also had the problem with CSS loading after the page rendering, so solution was to read the css file content and write it to the new document:

    var w = window.open();
    jQuery.get('/styles.css', function (data) {
        w.document.write('<html><head><style>');
        w.document.write(data);
        w.document.write('</style></head><body>');
        w.document.write($('.print-content').html());
        w.document.write('</body></html>');
        w.print();
        w.close();
    });

Is there any Java Script code to open pictures on a new window , The window object represents an open window in a browser. If a document contain frames open(), Opens a new browser window. print(), Prints the content of� The opener property returns a reference to the window that created the window. When opening a window with the window.open() method, you can use this property from the destination window to return details of the source (parent) window. Coding Tip: window.opener.close() will close the source (parent) window.


I had the same issue. What I am finding is that it is printing before the css has time to render on the page. What I did to find this was do a setTimeout on the print call and all styling was then showing up in the printed document. If I did not do the timeout I found that the styling was not being picked up in the print call.

Popup Windows Made Easy: Here's The JavaScript Code To Copy , I need codes to open a small picture by click on it to open it in a new window using Java That will create a "popup" window with the picture.jpg image. This article discusses how to use HTML, CSS style sheets, and JavaScript to produce � Here Mudassar Ahmed Khan has explained how to print DIV contents with CSS styles using JavaScript and jQuery without using any jQuery Print plugin. When one tries to print a DIV with CSS styles applied from an external CSS file, the contents are printed without the CSS styles. Thus using the following trick one can print the DIV contents with the CSS styles. TAGs: JavaScript, jQuery, HTML, Div


Open Link in a New Window, A tutorial on creating 'popup window' web pages. Learn HTML Code, Tags & CSS Popup windows (aka popups) are popular for small sidebar-style The script above opens the popup, but something needs to run the script. not get an icon in the task bar (the strip along the bottom of the screen). I need to open a new window with a page already coded (inside the same domain) and add some content. The problem is that if I use OpenWindow.write() the page is not loaded yet or it overrides everything and only the code added through write appears.


Window.open(), JavaScript way: This link will open in new window/tab With jQuery: on all the most important front-end technologies, from React to CSS,� Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


How to Open Hyperlink in a New Window, The open() method creates a new secondary browser window, similar After a window is opened, JavaScript can't be used to change the features. Links & JavaScript Living Together in Harmony, Jeff Howden, February 2002 user stylesheet (userContent.css in Mozilla-based browsers) for his viewing� HTML attribute (valid in HTML5 now): This link will open in new window/tab Inline JavaScript way: This link will open in new window/tab With jQuery: See