How to open another HTML page using Javascript

Question

I am working on a website and thought of reducing the number of pages by writing a bit of lines in javascript. I have a table on a page which leads you to 15 other pages. So I thought of opening one page that has all the info of the 15 pages combined and display the content depending on which link is click on the table. One of my table data is as under

<td><a style="color:black;" onClick="openCompiler()">C++ Compiler</a></td>

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 :)

is `mypage.html` an Object of the name `mypage` and the property `html` holds the URL or are you just missing the quotes as it **is** already the name `window.open("mypage.html");` — Axel Amthor, Dec 28 '14 at 07:22
I think this is what you are looking for [JS Redirect](http://stackoverflow.com/questions/4744751/how-do-i-redirect-with-javascript) — practice2perfect, Dec 28 '14 at 07:37
@practice2perfect redirecting with JS will rid him of the ability to modify styling, etc. — lucasem, Dec 28 '14 at 07:51

score 4 · Answer 1 · answered Aug 22 '20 at 04:36

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")

score 2 · Answer 2 · edited May 23 '17 at 10:33

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:

<head>
<script>
function display() {
  var id = parseURL();
  document.getElementById(id).style.display="block";
}
function parseURL() {
   refer to: https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
}
</script>
</head>
<body onload="display()">
....

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

lucasem · Answer 3 · 2014-12-28T07:49:21.960

0

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)

edited Dec 28 '14 at 07:49

answered Dec 28 '14 at 07:31

lucasem

481
3
12

Try `"./mypage.html"` and check for case (`"MyPage.HTML"`) when this is a local file on a WIN system! – Axel Amthor Dec 28 '14 at 07:46

score 0 · Answer 4 · answered Dec 28 '14 at 07:34

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('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">');
doc.writeln("<html>");
doc.writeln("<head>");
....
doc.writeln("</html>");
doc.close();

just as an idea to proceed.

So I have to redo the whole document to make it work the way i want it to? — , Dec 28 '14 at 07:38

How to open another HTML page using Javascript

4 Answers4