如何使用 Javascript 打開另一個 HTML 頁面

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"; 正在當前頁面中尋找名為 compiler 的元素。

我在找什么：

1）一種使用javascript打開另一個html頁面的方法。

2）一種從初始頁面（帶有表格的頁面）在新頁面上設置元素樣式的方法。

感謝所有幫助:)

Answer 1

好吧，這里有一些問題:)

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://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
}
</script>
</head>
<body onload="display()">
....

這個想法是通過 GET 參數將要顯示的元素的 id 傳遞給新頁面，然后從新頁面中的 URL 中取回它。 請參閱如何在 JavaScript 中獲取“GET”請求參數？

毛羅

Answer 2

如果您嘗試打開 html 文件，則可以從同一文件夾中使用以下 javascript 代碼：

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

不要忘記雙引號。 如果你想打開另一個網站，你可以使用下面的javascript代碼：

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

Answer 3

放棄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 4

這不能以您設計的方式工作。 根據定義，新窗口中新文檔的加載是異步的，請參見此處https://developer.mozilla.org/en-US/docs/Web/API/Window.open

因此，在“open”調用之后立即設置樣式必須失敗，因為帶有相應元素（“compiler”）的文檔在那個時候不能被加載並且很可能不會被加載。

您實際上可以做的是，加載文檔並等待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();

只是作為一個想法繼續。

如何使用 Javascript 打開另一個 HTML 頁面

問題描述

4 個解決方案

解決方案1
2 2014-12-28 08:02:00

解決方案2
2 2020-08-22 04:36:58

解決方案3
0 2014-12-28 07:31:38

解決方案4
0 2014-12-28 07:34:54

如何使用 Javascript 打開另一個 HTML 頁面

問題描述

4 個解決方案

解決方案1 2 2014-12-28 08:02:00

解決方案2 2 2020-08-22 04:36:58

解決方案3 0 2014-12-28 07:31:38

解決方案4 0 2014-12-28 07:34:54

解決方案1
2 2014-12-28 08:02:00

解決方案2
2 2020-08-22 04:36:58

解決方案3
0 2014-12-28 07:31:38

解決方案4
0 2014-12-28 07:34:54