Open a New JavaScript Window(.Open) Along with Its CSS Styling

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

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();

window.open Style using css

Check out this answer: https://stackoverflow.com/a/18758370/1060487

From the answer:

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();

How to specify external js and css for new window opened using window.open

Replace the *** with your html code

var w = window.open();
w.document.write('<html><head><title>Test</title>');
w.document.write('<link rel="stylesheet" href="style.css">');
w.document.write('</head><body>');
w.document.write('<p>This is the new page.</p>');
w.document.write('</body></html>');
w.document.close();

Let me know if this is useful :)

Print CSS: How do I open a new tab of the current page and append CSS?

/*jslint browser: true, devel: true */
/*global jQuery */
/*global $ */
$(document).ready(function () {
  'use strict';
  jQuery('#print').click(function (event) {
    event.preventDefault();
    var childWindow = window.open("<myCurrentURL>", '_blank');
    $(childWindow.document).find("head").append('<link rel="stylesheet" type="text/css" href="print.css">');
    return false;
  });
});

Just so you know this will not work with cross-domain calls unless it adheres to CORS.

Open new window with css and pictures

function Print() {
    var printWindow = window.open("", "Print", "status=no, toolbar=no, scrollbars=yes", "false" );
    $("link, style, script").each(function() {
       $(printWindow.document.head).append($(this).clone())
    });
    var toInsert = $("div.book").html();
    $(printWindow.document.body).append(toInsert);
}

DEMO

While clicking flex card, open a new page and display the parsed data with style in javascript / jquery

Since you are going to open a new window you will lost the stylesheet, so you must write it in your document as follow :

function clickFunction(recipes){  
    let myWindow = window.open("","Preview");           myWindow.document.open();     myWindow.document.write('<head>')     myWindow.document.write('<link rel="stylesheet" href="yourstyle.css">');               myWindow.document.write('</head><body>')
    myWindow.document.write('<br>Name:'+recipes.name+'<br>');    myWindow.document.write("<table><tr><th>Name</th><th>Amount</th></tr> </table>");    for(var i=0; i < recipes.Ingredients.length; i++){        var name = recipes.Ingredients[i].name;        var amount = recipes.Ingredients[i].amount;        myWindow.document.write("<table><tr><td>"+name+"</td><td>"+amount+"</td></tr></table>");    }    myWindow.document.write('<br>Steps:'+recipes.steps+'<br>');    myWindow.document.write('<br>Similar Cuisines:'+recipes.SimilarCuisines+'<br>');          myWindow.document.write('</body>')
    myWindow.document.close();   }

$(function(){    var $container = $('.container');    $.ajax({        type:'GET',        dataType: 'json',        url:'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',        success: function (data) {            //console.log(data.recipes);            var htmlContent="";       //          htmlContent+='<head>';     //htmlContent+='<link rel="stylesheet" href="style.css">';               // htmlContent+='</head><body>';            for (var i=0; i<data.recipes.length;i++) {                var recipe = data.recipes[i];
  htmlContent += "<div class=\"card\" onclick='clickFunction("+JSON.stringify(data.recipes[i])+")'>";                htmlContent += "<h1>";                htmlContent += data.recipes[i].name                htmlContent += "</h1>";                htmlContent += "</div>";            }           //  htmlContent+='</body>'            document.getElementById("recipebody").innerHTML = htmlContent;         }    });});

*{    box-sizing: border-box;}body{    background: url('cutlery.jpg');  }#root{    max-width: 100%;    margin: 0 auto;    position: relative;}
.container{    display: flex;    flex-wrap: wrap;      position: relative;    padding:10px;}h1 {    text-align: center;    background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);    font-size: 1.5rem;    padding: 1rem 2rem;    color: white;}.card {    margin:5px;        background: white;    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);    border-radius: 12px;    overflow: hidden;    grid-gap:20px;}.card:hover {    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);    transform: translate3D(0, -2px, 0);}@media screen and (min-width: 600px) {    .card{        flex: 1 1 calc(50% - 2rem);  }}
@media screen and (min-width: 900px) {    .card{        flex: 1 1 calc(33% - 2rem);  }}.card:nth-child(2n) h1 {    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);}
.card:nth-child(4n) h1 {    background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);}
.card:nth-child(5n) h1 {    background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);}

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="style.css">
</head><body><div id="root">    <h1>List of Recipies</h1>    <div class="container" id="recipebody">    </div></div>
</body>

Open window in JavaScript with HTML inserted

You can use window.open to open a new window/tab(according to browser setting) in javascript.

By using document.write you can write HTML content to the opened window.

Apply CSS to a popup Window

Do you really have '~' in your path? Try to remove it.
Could you give link to your document?
Also, if you want just display text - you can use with css property "position:absolute" and provide necessary coordinates to it.

Creating new windows when using backbone.js and jQuery

I can suggest you two possible solutions:

1. Create a new route in your application back end which will generate html page with just needed scripts and styles. And after it do the same as you have done but change winsow.open('yournewroute').

2. Use method described here. In plain javascript it looks like

var w = window.open('');
w.document.write('<html><head><title>Dialog</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
w.document.write(new MyView({model: MyModels}).el);
w.document.write('</body></html>');

You could do it with jQuery as well.

Hope it helps.

Update

Selecting all javascript's import tags in document:

var $javascriptTags = $('script[type="text/javascript"]');
$(w.document.head).append($javascriptTags);

Same with stylesheets:

var $stylesheetTags = $('link[rel="stylesheet"]');
$(w.document.head).append($stylesheetTags);

Open a New JavaScript Window(.Open) Along with Its CSS Styling