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

2018-06-12 03:12:42

我正在一个网站上工作，想通过在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）从初始页面（与表格一起）在新页面上设置元素样式的方法。

所有的帮助是赞赏:)

这不能以你设计的方式工作。根据定义，在新窗口中加载新文档是异步的，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window.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();

只是一个想法继续。

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

以及这里有一些问题:)

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中获取它。请参阅如何在JavaScript中获取“GET”请求参数？

毛罗

链接地址: http://www.djcxy.com/p/34731.html

上一篇: How to open another HTML page using Javascript

下一篇: How to track with Google Analytics on a redirection page with PHP?