CODEWITHSUNDEEP
javascript
Hui Hao
Hui Hao

Reputation: 3

access new window's DOM from the parent's javascript

I am trying to click on a button, and call the function to make it open a new window that is already exist using window.open() method, and at the same time, I want to change the new window's content using document.getElementById('para').innerHTML="New"; but I am not able to access and change the content.

<!DOCTYPE html>
<html>
<body>

<p>I want to click on the button and opens a new window, can change the new window's text "old"to the word "New", but I can't access the new window</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var myWindow = window.open("newWindow.html", "MsgWindow", "width=200, height=100");
    myWindow.document.getElementById('para').innerHTML="New";
}
</script>

</body>
</html>

Below, it is the new window I am trying to access and manipulate

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

</head>

<body>

<p id="para">Old</p>
</body>
</html>

Thank you very much!

Hui

Upvotes: 0

Views: 117

Answers (2)

France Bruno Simao
France Bruno Simao

Reputation: 1

You must use sessionStorage to be able to change/pass information from one page to another before open new HTML page.

Upvotes: 0

jfriend00
jfriend00

Reputation: 708026

You have to wait for the new window to load its content. The content won't yet be available immediately after you open the window. You can use the window load event to know when it has finished loading and you can THEN modify its DOM when that event fires.

<script>
function myFunction() {
    var myWindow = window.open("newWindow.html", "MsgWindow", "width=200, height=100");
    myWindow.addEventListener("load", function() {
        myWindow.document.getElementById('para').innerHTML="New";
    });
}
</script>

Upvotes: 1

Related Questions