How to Open a New Window and Insert HTML into It Using Jquery

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/

How to open a new window with jQuery and access the elements in the new window?

I believe you need to attach your script to the new window, like so:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.createElement('script');
script.src = 'js/myScript.js';
newWindow.document.head.appendChild(script);

To access the elements in the new window, you need to simply reference the newWindow's document, like so:

var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
newWindow.document.$("input[name ='firstName']").html('test');

Translated the script partially to Vanilla JS to do the exact same things for newWindow:

var windowName = $(this).attr('id');
var newWindow = window.open('http://www.exampleweb/example.phtml', windowName, "height=300,width=400");
$(newWindow).on("load", function()
    {
      for (var i = 0; i < newWindow.document.querySelector("select[name='highSchool']").options.length; i++){
            var option = newWindow.document.querySelector("select[name='highSchool']").options[i];
            if (option.text === random_dict.highSchool){
                  newWindow.document.querySelector("select[name='highSchool']").value = option.value;
                  break;
            };
      };
            
            
      for (var j = 0; j < newWindow.document.querySelector("select[name='title']").options.length; j++){
            var option1 = newWindow.document.querySelector("select[name='title']").options[j];
            if (option1.text === random_dict.title){
                  newWindow.document.querySelector("select[name='title']").value = option1.value;
                  break;
            };
      };

      newWindow.document.querySelector("input[name='firstName']").value = random_dict.firstName;
      newWindow.document.querySelector("input[name='lastName']").value = random_dict.lastName;
});

insert script to new window with jquery html()

You can execute any script on the opened window if the target page and the main page are hosted in the same URL and protocol. (I assume it was opened using Window.open() function)

Save the reference to the opened window...

var popup = window.open("/page2.html");

and use it to access its document:

$(popup.document.body).append("<script>alert()</script>");

If you are importing jQuery in the opened window as well you can also call

popup.$(popup.document.body).append("<script>alert()</script>");

Open new window from link with JQuery

For this please try below code :

<!DOCTYPE html>
<html lang="sv-se">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="Navigering.js"></script>
<title>Navigering</title>
</head>
<body>
<h1>Navigering</h1>
<a href="https://www.google.se/" onclick="window.open(this.href, 'newwindow', 'width=300, height=250'); return false;" alt="google">Link toGoogle</a>
</body>
</html>

Here, If we click on "LinktoGoogle" link then it will open link in new window (also we can set height and width of new window) and there is no need to add any jquery code for this.

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.

Writing html to a new window with javascript

Your new window is probably being blocked by the popup blocker built into most browsers. If you create the new window as a direct result of a user action (key, click), then the browser usually will not block it. But, if you wait until sometime later (like after an ajax call completes), then it will get blocked and that is probably what is happening in your case.

So, the fix is usually to create the window immediately in direct response to the user event (don't wait until the ajax call completes), keep the window handle in a variable and then put the content in the window later after your ajax call completes.

function newmore(str){
    var identifier = 4;
    // create window immediately so it won't be blocked by popup blocker
    var w = window.open();
    //get the history
    $.post("ajaxQuery.php", {
        identifier : identifier,
        vanid : str
    },
    //ajax query 
    function(data) {
        //response is here
        $(w.document.body).html(data);

    });//end ajax                

}

Make link open in new window , javascript on html table

You can do it like:

jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        if(this.hasAttribute("target")){
            window.open($(this).data("href"),$(this).data("target"));
        }
        else{
            window.document.location = $(this).data("href");
        }
    });
});

That checks if the <a> has a target attribute, and uses it if it does.

CodePen Demo

EDIT:
Here is the solution to your comment:

  jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        if(this.getAttribute("href").substr(this.getAttribute("href").length - 3)=== "###"){
            window.open(this.getAttribute("href").substring(0, this.getAttribute("href").length-3),"_blank");
        }
        else{
            window.document.location = $(this).data("href");
        }
    });
});

How to Open a New Window and Insert HTML into It Using Jquery