JavaScript/jQuery在其他html頁面中添加innerHtml

我有兩個html頁面，在index.html文件中，我有一個button和一個input textbox。我希望textbox中的值顯示在下一頁上。我應該如何去做這件事，我應該有兩個JavaScript文件？或者是什麼？JavaScript/jQuery在其他html頁面中添加innerHtml

的Javascript：

$('#searchBtn').click(function(){ 

    var search = document.getElementById('searchField'); 
    document.getElementById("demo").innerHTML = search.value; 
    });

的Index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="css/index.css" type="text/css" /> 
     <title>The Lantzyfi Bay</title> 
    </head> 
    <body> 
     <div class="head"> 
      <img class="logo" src="pics/logo.png">  
     </div> 
     <div class="body"> 
      <form> 
       <div class="searchField"> 
        <input id="searchField" type="text" placeholder="Lantzify Search" name="search" size="32"/> 
        <a id="searchBtn" class="search" href="results.html">Search</a> 
       </div> 
       <div class="checkboxes"> 
        <input type="checkbox" name="music">Music</input> 
        <input type="checkbox" name="pics">Pics</input> 
        <input type="checkbox" name="videos">Videos</input> 
        <input type="checkbox" name="other">Other</input> 
       </div> 
      </form> 
      <div class="links"> 
       <a href="#">Userpolicy</a> 
       <a href="#">About</a> 
       <a href="#">Lorem Ipsum</a> 


      </div> 


     </div> 




     <script type="text/javascript" src="java/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="java/search.js"></script> 
    </body> 
</html>

results.html：

<!DOCHTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="css/index.css" type="text/css" /> 
     <link rel="stylesheet" href="css/results.css" type="text/css" /> 
     <title>The Lantzyfi Bay</title> 

    </head> 
    <body> 
     <div class="head"> 
      <form id="q"> 
       <a href="index.html"><img class="logo" src="pics/logo.png"></a> 
       <input id="searchField" type="text" placeholder="User serch" name="search" size="30"/> 
       <a id="searchBtn" class="search" href="results.html">Search</a> 
      </form> 

     </div> 
     <div class="content"> 
      <h2>Serach: <!--Users Search word--></h2><h2 id="demo"></h2> 
      <div class="mainContent"> 
       <table> 
        <thead> 
         <tr> 
          <th>Type</th> 
          <th>Name</th> 
          <th>DB</th> 
          <th>RP</th> 
         </tr> 
        </thead> 
        <tr> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
        </tr> 
        <tr> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
        </tr> 
        <tr> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
        </tr> 
        <tr> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
        </tr> 
        <tr> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
         <td>Test</td> 
        </tr> 
       </table> 
      </div> 
     </div> 


     <script type="text/javascript" src="java/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript" src="java/search.js"></script> 
    </body> 
</html>

來源

2015-11-06 Johannes Lantz

不 - 你不能這樣做，JavaScript運行在一個頁面內，你改變頁面，JavaScript不見了 –

您可以將它添加到URL中，而不是在另一端讀取它。

的Index.html將是這樣的：

$("#searchBtn").on('click', function() { 
    var url = "results.html?q=" + $("#searchField").val(); 
    window.location = url 
}

Result.html會碰到這樣的：

$(document).read(function() { 
    $("...").html(getParameterName('q')); 
} 

function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
}

Credit爲getParameterName功能

注：

您必須注意，這不是正確的做事方式，因爲你會遇到很多問題，比如url編碼，字符串太長。然而，這是一個很好的開始。祝一切順利。

另外我在代碼中使用了一些jQuery。如果這是一個問題，讓我知道，我可以改變它沒有

來源

2015-11-06 09:42:26

只有一個簡單的JS和HTML不能。通過存儲值和定時器（1）或SignalR（2）它可以做到這一點。

1，存儲價值somewear（數據庫或餅乾，如果只是針對實際用戶），並在某個時間重新搜索結果頁面，由JS或outher，並讀取值。

2，SignalR異步刷新頁面的內容，但是你不需要ASP.NET（MCV）。 http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr#next

來源

2015-11-06 09:35:50

它看起來有兩個頁面來自同一個來源。

localStorage的是一個選項： The Mozilla demo containing an example
如果第一頁具有對第二頁，例如的窗口的引用通過調用window.open打開第二頁。 window.postMessage也是一個選項，它也適用於交叉原點。
如果Web服務器也是你的控制之下，你當然可以用服務器作爲發射器通過AJAX將數據發送回服務器，然後讓服務器通過Server Sent Event或Web Socket和等
通知第2頁

來源

2015-11-06 09:51:33 carltonf

JavaScript/jQuery在其他html頁面中添加innerHtml

回答

相關問題