logo标签列表

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

javascripthtml
3

我正在制作一个网站，想通过编写一些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";
}

在这个页面中，我有一个名为编译器的包装器(wrapper)，最初没有显示，但当链接被点击时，它会打开页面并显示包装器(compiler)。
我的尝试失败了，现在正在寻找另一种方法：
1) window.open()无法打开我的文件夹中的HTML文件。
2) 我不确定document.getElementById(compiler).style.display="block";是否在当前页面中查找名为compiler的元素。
我所寻找的是：
1) 使用JavaScript打开另一个HTML页面的方法。
2) 从初始页面(带有表格的页面)设置新页面上元素的样式的方法。
感谢您的所有帮助 :)
打开的页面必须在新标签页/窗口中吗？ - lucasem
1
mypage.html 是名为 mypage 的对象吗？属性 html 保存了 URL，还是你只是忘记加引号了，因为它已经是名称 window.open("mypage.html");。 - Axel Amthor
@AxelAmthor 没有加引号。 - user4375224
@lucasem 不应该是这样的。 - user4375224
@practice2perfect 使用JS重定向将使他无法修改样式等内容。 - lucasem
显示剩余2条评论
4个回答
5

如果你想要打开同一文件夹内的 HTML 文件，可以使用以下 JavaScript 代码：

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

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

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

这里有一些问题需要解决 :)

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

2) 你好像忘了使用双引号：document.getElementById("compiler").style.display="block";

3) 在函数中不能引用已经加载的新页面中的 "compiler" 元素。你可以尝试像这样做：

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://dev59.com/z3RA5IYBdhLWcg3wyA_1
}
</script>
</head>
<body onload="display()">
....

这个想法是通过GET参数将要显示的元素的ID传递到新页面，然后从新页面的URL中获取它。

请参考如何在JavaScript中获取“GET”请求参数？

Mauro

0

放弃使用 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 操作）。
尝试使用"./mypage.html"这个路径，并检查大小写（例如在 Windows 系统上本地文件可能是"MyPage.HTML"）！ - Axel Amthor
0

你设计的方式行不通。根据定义，新窗口中新文档的加载是异步的，请参见这里 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();

只是一个继续的想法。

那我必须重新做整个文档才能让它按照我的意愿工作吗？ - user4375224
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接