divの私は、この機能を使用してdiv要素内の私のページのコンテンツをロードしたいのiframe

Question

のように振る舞う作る：

function loadmypage(DIV, pageURL) 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById(DIV).innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET", pageURL ,true); 
xmlhttp.send(); 
} 

私は「フレーム」自体の内部リンクをクリックしたときただし、機能しません作業。私はターゲット要素がロードされたページ と異なるページにあるという理由を推測します。

私の質問は：div要素をiframeのように動作させる方法はありますか？フレーム全体のページを読み込むには？

PS：セキュリティ上の理由からiFrameを使用することは許可されていません。メインページの リンクがターゲットを正常に読み込むと、これらのページ内のリンクをクリックすると問題が表示されます。

<div id="nav" class="mmenu"> 
           <ul type="none"> 

              <li><a href= "javascript:loadmypage('viewMessages.php')">Messages</a></li> 
              <li><a href= "javascript:loadmypage('userHomepage.php')">My Conferences</a></li> 
              <li><a href= "javascript:loadmypage('availableConferences.php')">Conferences</a></li> 
              <li><a href= "javascript:loadmypage('incomingRequests.php')">Requests</a></li> 
              <li><a href= #>News</a></li> 
              <li><a href= #>Options</a></li> 


             </ul> 
            </div> 
          </fieldset> 

             <div id="collabsoft" class="collabsoft"> 

Answer 1

div引数が指定されていないため、リンクが機能しません。あなたの関数に注意してください：

function loadmypage(DIV, pageURL) 
{ 
... 

最初の引数はDIVであり、あなたはpageURLだけを渡しています。

<li><a href= "javascript:loadmypage('viewMessages.php')">Messages</a></li> 
              <li><a href= "javascript:loadmypage('userHomepage.php')">My Conferences</a></li> 
              <li><a href= "javascript:loadmypage('availableConferences.php')">Conferences</a></li> 
              <li><a href= "javascript:loadmypage('incomingRequests.php')">Requests</a></li> 

Answer 2

<div>は、あなたがそのようなものを想像した場合、任意の設定またはトグルでのように動作させることはできません。結局、が必要な場合は、を使用してください。

とにかく、動作しないリンクは相対アドレス指定を使用している可能性があります。それはページ上の内部リンクに対する合理的な期待です。ページから作業するには、絶対アドレスを使用する必要があります。ページ

www.example.com/somedirectory/index.php 

をロードし、それはあなたが

<link href="www.example.com/somedirectory/style.css" > 

など

だからあなたはDOMをトラバースすることができます使用する必要が

<link href="style.css" > 

を使用している場合

ツリー、0を探していますaimgその他のすべての要素は、ある属性のアドレスを使用して、それらの属性をチェックし、絶対アドレスを使用しているかどうかを確認します（正規表現で行うこともできますが、 ：http://something...,www.something.com/...、さらにはlocalhost/...）、そうでない場合は、ダウンロードしたドキュメントが置かれているウェブページとディレクトリへのパス全体を前に置いて参照してください。

document.bodyを訪問し、すべての訪問先ノードに対して、すべての要素の子に対して関数を呼び出すことから、再帰関数を使用してDOMツリーをトラバースできます。あなたの場合は、document.getElementsByTagNameを利用して、必要な特定の要素のリストを正確に取得することができます。

最後に、セキュリティ上の理由から、スクリプトは同じホスト（IPおよびポート）から含める必要があることに注意してください。したがって、他のWebからのスクリプトは、リモートで参照することはできません。あなたもあなたのサーバーにダウンロードする必要があります。

TLDR：jQueryは必要ありませんが、を使用してください。