首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用Javascript打开另一个HTML页面

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

Stack Overflow用户
提问于 2014-12-28 15:17:34
回答 4查看 23.6K关注 0票数 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";
}

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

我的上述努力失败了,我正在寻找另一种方法,如:

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

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

我要找的是:

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

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

感谢所有帮助:)

EN

回答 4

Stack Overflow用户

发布于 2020-08-22 12:36:59

如果您正在尝试打开html文件,则可以使用以下javascript代码从同一文件夹中打开:

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

别忘了双引号。如果您想打开另一个网站,您可以使用以下javascript代码:

 location.replace("https://stackoverflow.com")
票数 3
EN

Stack Overflow用户

发布于 2014-12-28 16:02:00

这里有一些问题:)

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?

毛罗

票数 2
EN

Stack Overflow用户

发布于 2014-12-28 15:31:39

放弃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操作有更好的理解)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27674425

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档