Question

我正在开发一个网站，并想通过在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";是否正在寻找当前页面中名为编译器的元素。

我在寻找：

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

2）从初始页面（包含表格）在新页面上设置元素样式的方法。

感谢所有帮助：）

Answer 1

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

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

别忘了双引号。如果要打开另一个网站，可以使用以下javascript代码：

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

Answer 2

放弃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操作）

Answer 3

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

所以，在＆＃34; open＆＃34;之后立即设置样式。调用必须失败，因为具有相应元素的文档（＆＃34;编译器＆＃34;）当时不得加载，可能不会加载。

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

只是一个想法继续下去。

Answer 4

这里有一些问题：）

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

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

3）你不能参考＆＃34;编译器＆＃34;来自您的函数的元素，因为当您到达那里时，您已经加载了新页面。你可以这样做：

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?

莫罗

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

4 个答案: