How to open another html file using javascript

I am triggering an event call openCompiler() when the link is clicked.

function openCompiler()
{
    window.open("mypage.html")
    document.getElementById(compiler).style.display="block";
}

In the page I have a wrapper(called compiler) which has no display initially but when the link is clicked , it opens the page and displays the wrapper (called compiler).

My above efforts have failed and am looking for another way as:

1) The window.open() is not able to open an HTML file on my folder.

2 I am not sure if the document.getElementById(compiler).style.display="block"; is looking for the element called compiler in the current page.

What I am looking for:

1) A way to open another html page using javascript.

2) A way to set style of an element on the new page from the initial page(one with the table).

All help is appreciated :)

asked Dec 28, 2014 at 7:17

7

If you are trying to open a html file, from the same folder you can use the following javascript code :

 location.replace("./name_of_the_file.html")

Don't forget the double quotes. If you want to open another website, you can use the following javascript code:

 location.replace("https://stackoverflow.com")

answered Aug 22, 2020 at 4:36

Ashiq FirozAshiq Firoz

1112 silver badges4 bronze badges

well there are some issues here :)

1) jump to a new page using window.location="mypage.html" (remember the double quotes, single do as well)

2) you seem to forget about double quoting: document.getElementById("compiler").style.display="block";

3) you cannot refer to the "compiler" element from your function because when you get there, you have already loaded the new page. You can do something like this:

window.location="mypage.html?id=compiler"

And in your mypage.html:

....

the idea is to pass the id of the element to be displayed to the new page via GET parameter and then get it back from the URL in the new page. Refer to How to get "GET" request parameters in JavaScript?

Mauro

answered Dec 28, 2014 at 8:02

This can't work in the way you designed it. Per definition, the loading of the new document in the new window is asynchronous, see here https://developer.mozilla.org/en-US/docs/Web/API/Window.open

So, the setting of a style immediately after the "open" call must fail, since the document with the according element ("compiler") must not be loaded at that time and likely will not be.

What you actually can do is, load the doc and wait for the onready event, but only in the new window, and do all the settings over there. You may also craft the document from the source window like this:

newWindow = window.open("", "Compiler", "" );
doc = newWindow.document;
doc.open("text/html","replace");
doc.writeln('');
doc.writeln("");
doc.writeln("");
....
doc.writeln("");
doc.close();

just as an idea to proceed.

answered Dec 28, 2014 at 7:34

Axel AmthorAxel Amthor

10.9k1 gold badge24 silver badges44 bronze badges

1

Abandoning window.open:

Create an iframe:

var compiler = document.createElement('iframe');
compiler.src = "mypage.html";
compiler.id = "compiler";

Put it where you want it to be:

document.getElementById("compilercontainer").appendChild(compiler);

Change it:

compiler = document.getElementById("compiler");
var comdoc = compiler.contentWindow.document;
var style = comdoc.createElement('style');
style.innerHTML = ".foo {color:orange}";
comdoc.head.appendChild(style);

This could probably be made neater with JQuery, but that isn't tagged (and I understand pure JS DOM manipulation better, personally)

answered Dec 28, 2014 at 7:31

lucasemlucasem

4713 silver badges11 bronze badges

1

How do I open a new HTML file in JavaScript?

How can I access another HTML file in HTML?

How do I open another page in JavaScript?

How do I open one HTML page from another?

Reply 5 0 Chia sẻ