在兩個HTML頁面之間傳遞JavaScript變量

Question

我有這個html頁面，該頁面收集電影名稱並將其存儲在JavaScript變量中。

<html>
<SCRIPT LANGUAGE="javascript">
function getMovieName() {
var movieName =  document.getElementById('movieName').value;
window.open("display.html?myVar1=42");
}
</SCRIPT>
<head>
<form onsubmit="return getMovieName();" name="login-form" class="login-form" method="post">
<input id="movieName" type="string" class="Enetr Movie Name" placeholder="Movie Name" />
<input type="submit" name="submit" value="Search" class="button" />
</form>
</head>
</html>

然后打開此html頁面。

<html>
<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = VARIABLE
document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}
</SCRIPT> 
<head>
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 550px;">
<iframe id="app" scrolling="no" src=""target="_top" style="border: 200px none; 
margin-left: -20px; margin-top:-140px; width: 900px;height: 350px;">
</iframe>
</div>
</head>
</html>

在哪里說'VARIABLE'是我想擁有先前定義的JavaScript變量的地方。 我希望對此有所幫助，謝謝。

Answer 1

如果您不想使用任何服務器端技術，則可以使用查詢字符串。 在打開新頁面時，然后在新頁面訪問URL中將影片名稱添加為查詢字符串參數，以獲取此變量。

<html>
<SCRIPT LANGUAGE="javascript">
function getMovieName() {
var movieName =  document.getElementById('movieName').value;
window.open("display.html?myVar1=42&movieName=" + movieName);
}


</SCRIPT>
<head>
<form onsubmit="return getMovieName();" name="login-form" class="login-form" method="post">
<input id="movieName" type="string" class="Enetr Movie Name" placeholder="Movie Name" />
<input type="submit" name="submit" value="Search" class="button" />
</form>
</head>
</html>

第二頁：

<html>
<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = getQueryVariable("movieName")
document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
</SCRIPT> 
<head>
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 550px;">
<iframe id="app" scrolling="no" src=""target="_top" style="border: 200px none; 
margin-left: -20px; margin-top:-140px; width: 900px;height: 350px;">
</iframe>
</div>
</head>
</html>

注意：我自己還沒有編寫getQueryVariable函數。 信譽指向此鏈接。

Answer 2

這條路：

 var movieName = window.location.hash;

URL看起來像

window.open("display.html#42"); // '42' is presumably that movie ID.

Answer 3

我之所以僅介紹此解決方案，是因為有人評論說，在JavaScript中解析查詢字符串有點麻煩...並且鑒於我可以完成想要的內容，而只需要一行代碼即可（無需對程序的其余部分進行太多更改）您可能要考慮以下問題：

var movieName = window.opener.document.getElementById("movieName").value;

用上面的那一行替換用於讀取`var movieName = getQueryVariable（“ movieName”）'的那一行，就這么簡單...

實際上，我的解決方案還允許您重構第一個文件中現在不需要的代碼：

更改≤script≥TAG，使其顯示為：

<SCRIPT LANGUAGE="javascript">
function getMovieName() {
    window.open("display.html?myVar1=42");
}
</SCRIPT>

...並且如先前在第二個文件中所述，≤script≥標簽將顯示為：

<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = self.opener.document.getElementById("movieName").value;
    document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}

CAVEAT：第一個網頁所在的服務器必須具有相同的主機名。 它們也必須在相同的端口上使用（可能不需要擔心。默認情況下，80端口似乎可以控制）。 我不認為這會成為問題，因為您在指定第二個頁面即winnow.open 'display.html'使用了相對尋址

在兩個HTML頁面之間傳遞JavaScript變量

問題描述

3 個解決方案

解決方案1
1 已采納 2014-11-05 01:15:40

解決方案2
1 2014-11-05 01:24:29

解決方案3
0 2014-11-05 02:19:08

在兩個HTML頁面之間傳遞JavaScript變量

問題描述

3 個解決方案

解決方案1 1 已采納 2014-11-05 01:15:40

解決方案2 1 2014-11-05 01:24:29

解決方案3 0 2014-11-05 02:19:08

解決方案1
1 已采納 2014-11-05 01:15:40

解決方案2
1 2014-11-05 01:24:29

解決方案3
0 2014-11-05 02:19:08