2016-03-31 14 views
2

ある要素の内容を別のhtmlファイル内の別の要素の内容で置き換えたいと思います。異なるHTMLファイルのある要素から別の要素にhtmlを置き換えます。

私はなどdocument.getElementById$(this)を使用して、同じHTMLファイル内の要素にこれを行うには、多くのJS & JQ機能を見てきましたが、これは別のHTMLファイル内の別の要素に一つの要素の内容を置き換えることができますか?以下は私の問題の例です。

pageOne.htmlファイル

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Page 1</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("#first").click(function() { 
        $("#second").html($(this).html()); 
       }); 
      }); 
     </script> 
      <body> 
       <p id = "first">Hello</p> 
       <a href="pageTwo.html" target="_self">Page 2</a> 
      </body> 
    </html> 

pageTwo.html

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Page 2</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
      <body> 
       <p id = "second">World!</p> 
       <a href="pageOne.html" target="_self">Page 1</a> 
      </body> 
    </html> 

私は、次のようにこれを行うためのさまざまな方法を試してみましたが、私はちょうどそれを取得していない午前:

<html> 
    <head> 
     <script> 
      function myFunction() { 
       document.getElementById("#second").innerHTML = #first; 
      } 
     </script> 
    </head> 
     <body> 
      <p id = "first" onclick = "myFunction()">Hello</p> 
     </body> 
</html> 

これは可能ですか?#番目の要素をクリックすると、#2番目の要素の内容が#firstに置き換えられます別のhtmlファイルにある要素の内容ですか?したがって、ページ間をクリックすると、<p>の内容は同じになります。

+1

が同じHTMLページにロードされた二つのファイルです:あなたは、あなたのウェブサーバ上のこれらの2つのファイルが必要になりますiframeで?それらは別々の窓にありますか? – Mario

+0

ajaxとSocketIOライブラリが必要です。 – Lukabot

+0

両方のページを同時に表示しない限り(@Marioの質問によると、iframe /別のタブにありますか?)、クライアントサイドのJavaScriptではこれを行うことはできません。 – CBroe

答えて

0

注意を(すなわち、ウェブページが表示されているように、DOM)。 したがって、ユーザーが表示しているレンダリングされたページ上のものを変更することは可能です。これらの言語は、ユーザーのローカルコンピュータに保存することも、Webサーバーに保存することもできません。

HTML <form>は、あるHTMLページから別のHTMLページにデータを送信できますが、サーバー上の.htmlページを更新することはできません。

サーバーを変更するには、PHPやasp.netなどのサーバー側言語を使用する必要があります。

XAMPP、LAMP、WAMP、MAMPなどの "P"のように、最も一般的なのはPHPです.GoDaddy、NameCheap、HostGatorなどの大手ホスティング企業から入手できる共有ホスティングパッケージのほとんどはLAMPスタック(Linux、Apache、MySQP、PHP)。あなたのサーバにPHPがインストールされている場合は、.htmlの代わりに拡張子.phpを使用してファイルに名前を付けるだけで十分です。 実際には、.htmlを再度使用する必要はありません。すべてのファイルの名前は.phpで、正確には.htmlというファイルと同じになります。ただし、必要に応じてPHPコードを処理できるようになりました。

あなた自身のコンピュータでPHPを使用するには、XAMPP (OSX、WindowsおよびLinuxで利用可能)をインストールしてください。ウェブフォルダがc:\xampp\htdocsで、ブラウザのアドレスバーにタイプ(唯一)のlocalhostが表示されていることを確認してください。

Here is a series of (free) tutorial videos約PHP。


私はあなたの質問を再度読んだので、私はHTMLフォームがあなたが必要とすることができると信じています。 first.htmlsecond.php

first.html

<!DOCTYPE html> 
<html> 
    <body> 
     <form action="second.php" method="post"> 
      <input name="firstname" type="text" value="Jonathan" /> 
      <input type="submit" value="Submit Now"> 
     </form> 
    </body> 
</html> 

second.php

<?php 
    $fn = $_POST['firstname']; 
?> 
<!DOCTYPE html> 
<html> 
    <body> 
     <p>You sent the name: <?php echo $fn; ?></p> 
    </body> 
</html> 
関連する問題