3

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

Improve this question
7
  • Does the opened page have to be in a new tab/window? Commented Dec 28, 2014 at 7:21
  • window.open return reference to new opened window Commented Dec 28, 2014 at 7:22
  • 1
    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"); Commented Dec 28, 2014 at 7:22
  • @AxelAmthor was missing the quotes Commented Dec 28, 2014 at 7:24
  • @lucasem nope it should not be Commented Dec 28, 2014 at 7:24

4 Answers 4

Reset to default
5

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")
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

So I have to redo the whole document to make it work the way i want it to?
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)

Improve this answer

1 Comment

Try "./mypage.html" and check for case ("MyPage.HTML") when this is a local file on a WIN system!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.