如何使用 Javascript 打开另一个 HTML 页面答案

【问题标题】：How to open another HTML page using Javascript如何使用 Javascript 打开另一个 HTML 页面
【发布时间】：2015-02-24 18:52:55
【问题描述】：

我正在开发一个网站，并想通过在 javascript 中编写一些代码来减少页面数量。我在一个页面上有一个表格，可以将您带到其他 15 个页面。所以我想打开一个页面，将 15 个页面的所有信息组合在一起，并根据点击表格的链接显示内容。我的表格数据之一如下

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

点击链接时我正在触发事件调用openCompiler()。

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

在页面中我有一个包装器（称为编译器），它最初没有显示，但当点击链接时，它会打开页面并显示包装器（称为编译器）。

我的上述努力都失败了，正在寻找另一种方法：

1) The window.open() 无法打开我文件夹中的 HTML 文件。

2我不确定document.getElementById(compiler).style.display="block";是否在当前页面中寻找名为compiler的元素。

我在寻找什么：

1) 一种使用 javascript 打开另一个 html 页面的方法。

2) 一种在新页面上从初始页面（带有表格的页面）设置元素样式的方法。

感谢所有帮助 :)

【问题讨论】：

打开的页面是否必须在新标签/窗口中？
window.open 返回对新打开窗口的引用
是 mypage.html 一个名称为 mypage 的对象，属性 html 包含 URL，或者您只是缺少引号，因为它 is 已经是名称 @ 987654330@
@AxelAmthor 缺少引号
@lucasem 不应该是

标签： javascript html

【解决方案1】：

放弃window.open：

创建一个 iframe：

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

把它放在你想要的地方：

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

改变它：

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

这可能会用 JQuery 变得更整洁，但没有标记（我个人更了解纯 JS DOM 操作）

【讨论】：

当这是 WIN 系统上的本地文件时，请尝试 "./mypage.html" 并检查大小写 ("MyPage.HTML")！

【解决方案2】：

这不能按照您设计的方式工作。根据定义，新窗口中新文档的加载是异步的，见这里https://developer.mozilla.org/en-US/docs/Web/API/Window.open

因此，在“open”调用之后立即设置样式肯定会失败，因为此时不得加载具有相应元素（“编译器”）的文档，而且很可能不会加载。

您实际上可以做的是，加载文档并等待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();

只是一个想法。

【讨论】：

所以我必须重做整个文档以使其按我想要的方式工作？

【解决方案3】：

这里有一些问题:)

1) 使用window.location="mypage.html" 跳转到新页面（记住双引号，单引号也可以）

2) 你似乎忘记了双引号：document.getElementById("compiler").style.display="block";

3) 你不能从你的函数中引用“编译器”元素，因为当你到达那里时，你已经加载了新页面。你可以这样做：

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

在你的 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()">
....

想法是通过GET参数将要显示的元素的id传递给新页面，然后从新页面的URL中取回。参考How to get "GET" request parameters in JavaScript?

毛罗

【讨论】：

【解决方案4】：

如果您尝试打开一个 html 文件，您可以从同一文件夹中使用以下 javascript 代码：

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

不要忘记双引号。如果你想打开另一个网站，你可以使用下面的javascript代码：

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

【讨论】：