Open Window in JavaScript With HTML Inserted

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.

How to open a new window and insert html into it using jQuery?

Here's an example to open a new window with content using jQuery

<script>
function nWin() {
  var w = window.open();
  var html = $("#toNewWindow").html();

    $(w.document.body).html(html);
}

$(function() {
    $("a#print").click(nWin);
});
</script>

<div id="toNewWindow">
    <p>Your content here</p>
</div>

<a href="javascript:;" id="print">Open</a>

EDIT:
For those who say that this code doesn't work, here's a jsfiddle to try it http://jsfiddle.net/8dXvt/

Add content to a new open window

in parent.html:

<script type="text/javascript">
    $(document).ready(function () {
        var output = "data";
        var OpenWindow = window.open("child.html", "mywin", '');
        OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
        OpenWindow.init();
    });
</script>

in child.html:

<script type="text/javascript">
    var dataFromParent;    
    function init() {
        document.write(dataFromParent);
    }
</script>

How to write JavaScript in a new window (window.open())?

Mark -

The example below works, provided popups are not blocked. This is just one of many ways you could do this. Note that it calls the function in the parent window using "opener" and then changes the font size of the body. Your code is trying to set the font size of document, which is not what you want, i.e., it won't do anything. Also note that fontSize is case sensitive and that if you use "fontsize" nothing will happen. Lastly, don't use percents when setting body font size as it will not work as you might expect. Instead use px (pixels). Anyway, this should be enough to get you going and I'll leave the details to you.

<html>
<body onload="init()">
<h2>Parent Window</h2>
 <script type="text/javascript">

     var popup;

     function init() {
        popup =  window.open("", "newWindow", "width=800, height=600");
        if (popup) popup.document.write('<html><body>Child Window<br><button onclick="opener.fontSize(48)">Test</button></body></html>'); 
     }

     function fontSize(size) {
         popup.document.body.style.fontSize = size + 'px';
     }

</script>
</body>
</html>

Running Javascript in new window.open

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>

Why HTML page inserted in popup with document.write needs a refresh to load in IE 7/8?

I completely ditched opening a popup. It's such a pain to work with them and not so user friendly given that there are popup blockers spread all over...

What I did was this:

Created a <form> element and assigned its action pointing to a controller action in my ASP.NET MVC app.

<form id="mapform" action="myproject/map/ArcGisMap" target="_blank" method="post"></form>

Take note about the target="_blank".

I also have a <button>:

<button type="button" id="arcGISMap">ArcGIS Map</button>

Then with some jQuery code we can simulate a form submit when clicking that button:

<script type="text/javascript">

$("#arcGISMap").click(function()
{
    $('#mapform').submit();
});

</script>

Because the form has a target="_blank" when it's submitted it'll open a new browser tab. Just what I wanted. That browser tab (not a new popup window) now has the View returned by the action method:

[HttpPost]
public ActionResult ArcGISMap()
{
    return View();
}

On my Razor view I added this:

@{
    Layout = null;
}

Setting the Layout to null allows me to render only the map on the screen.

Open to new window or tab on click

window.open is a function, so it should be called instead of assigned to.

Instead of:

window.open = "www.mywebsite.com, _blank";

It should be:

window.open("www.mywebsite.com", "_blank");

Also, if you want the function open the URL correctly, it should include the http(s):// prefix, otherwise it will open a relative path from the current windows location in some browsers.

The full code in your case would be:

onRegionClick: function (element, code, region) {
    if(code == 'us'){
        window.open("www.mywebsite.com", "_blank");
    }
}

Shorter version:

onRegionClick(element, code, region) => {
    if(code == 'us')
        window.open("www.mywebsite.com", "_blank");
}

For a dynamic URL, something like the following would work:

onRegionClick(element, code, region) => {
    if(code == 'us')
        window.open(`www.mywebsite.com/${code}`, "_blank");
}

Open Window in JavaScript With HTML Inserted