如何使用 Javascript 打开另一个 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27674425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open another HTML page using Javascript
提问by
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
我正在一个网站上工作，并考虑通过在 javascript 中编写一些行来减少页面数量。我在一个页面上有一张表格，可将您引向其他 15 个页面。所以我想打开一个页面，其中包含 15 个页面的所有信息，并根据点击表格的哪个链接来显示内容。我的表数据之一如下
<td><a style="color:black;" onClick="openCompiler()">C++ Compiler</a></td>
I am triggering an event call openCompiler()when the link is clicked.
openCompiler()单击链接时，我正在触发事件调用。
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.
1)The window.open()无法在我的文件夹中打开 HTML 文件。
2I am not sure if the document.getElementById(compiler).style.display="block";is looking for the element called compiler in the current page.
2我不确定document.getElementById(compiler).style.display="block";当前页面中是否正在寻找名为 compiler 的元素。
What I am looking for:
我在找什么：
1)A way to open another html page using javascript.
1）一种使用javascript打开另一个html页面的方法。
2)A way to set style of an element on the new page from the initial page(one with the table).
2）一种从初始页面（带有表格的页面）在新页面上设置元素样式的方法。
All help is appreciated :)
感谢所有帮助:)
回答by Mauro Cioni
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)
1) 使用跳转到新页面window.location="mypage.html"（记住双引号，单引号也是如此）
2) you seem to forget about double quoting: document.getElementById("compiler").style.display="block";
2）你似乎忘记了双引号： 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:
3) 你不能从你的函数中引用“compiler”元素，因为当你到达那里时，你已经加载了新页面。你可以这样做：
window.location="mypage.html?id=compiler"
And in your mypage.html:
在你的 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?
这个想法是通过 GET 参数将要显示的元素的 id 传递给新页面，然后从新页面中的 URL 中取回它。请参阅如何在 JavaScript 中获取“GET”请求参数？
Mauro
毛罗
回答by lucasem
Abandoning window.open:
放弃window.open：
Create an iframe:
创建一个 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)
这可能会用 JQuery 变得更整洁，但没有标记（我个人更了解纯 JS DOM 操作）
回答by Axel Amthor
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
这不能以您设计的方式工作。根据定义，新窗口中新文档的加载是异步的，请参见此处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.
因此，在“open”调用之后立即设置样式必须失败，因为带有相应元素（“编译器”）的文档在那个时候不能被加载，而且很可能不会被加载。
What you actually can do is, load the doc and wait for the onreadyevent, 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:
你实际上可以做的是，加载文档并等待onready事件，但只能在新窗口中，并在那里进行所有设置。您也可以像这样从源窗口制作文档：
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.
只是作为一个想法继续。
