How to open another HTML page using Javascript
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 :)
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.
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)
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
链接地址: http://www.djcxy.com/p/34732.html