不同的網頁加載在同一個容器

-1

我想建立一個網站，當我點擊1級，2級等按鈕時，它會在我的div「結果」中加載頁面。這是不同的網站內容被加載，每次我點擊在同一頁上的按鈕或div容器「結果」內的按鈕。我的代碼如下。我試圖使用jQuery，但我對此很陌生。不同的網頁加載在同一個容器

<html> 
    <head> 
     <script> 
      $(document).ready(function() { 
       $("#target").click(function(e) { 
        $('#result').load('http://www.youtube.com/user/EduGrade1'); 
        e.preventDefault(); 
       }); 
      });</script> 
    </head> 
    <body> 
     <div id="div1"> 
      <ul> 
       <li><a href="Grade.html"> CBSE Grades (1 to 12)</a> 

        <ul id="menu"> 
         <li><a href "http://www.youtube.com/user/EduGrade1" id="target"> Grade 1 </a> 
         </li> 
         <li><a href "http://www.youtube.com/user/EduGrade2"> Grade 2 </a> 
         </li> 
         <li><a href "#"> Grade 3 </a> 
         </li> 
         <li><a href "#"> Grade 4 </a> 
         </li> 
         <li><a href "#"> Grade 5 </a> 
         </li> 
         <li><a href "#"> Grade 6 </a> 
         </li> 
         <li><a href "#"> Grade 7 </a> 
         </li> 
         <li><a href "#"> Grade 8 </a> 
         </li> 
         <li><a href "#"> Grade 9 </a> 
         </li> 
         <li><a href "#"> Grade 10 </a> 
         </li> 
         <li><a href "#"> Grade 11 </a> 
         </li> 
         <li><a href "http://www.youtube.com/user/EduGrade12"> Grade 12 </a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <div> 
       <div id="div2"> 
        <ul> 
         <li><a href="Home.html">Home</a> 
         </li> 
        </ul> 
       </div> 
       <p>&nbsp; </p> 
       <div id="result"> 
        <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=EduGrade12&synd=open&w=480&h=340&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script> 
       </div> 
       </body>

來源

2013-06-06 Mohican

jquery.load（）着負載的內容從不同的域代碼片段... ！ –

而你的問題是......？ – Nikhil

你可以做這樣的事情

JavaScript代碼

$(document).ready(function() { 
     $(".target").click(function(e) { 
      var url = $(this).attr("link"); 
      $('#result').load(url, function(response, status, xhr) { 
        if (status == "error") { 
         var msg = "Sorry but there was an error: "; 
         $("#result").html(msg + xhr.status + " " + xhr.statusText); 
        } 
      }); 
     }); 
    });

HTML代碼，但請注意頁面必須在同一個域，您可以使用不加載跨域這種方法，打開跨域頁面，你可以使用iframe來代替。

<ul id="menu"> 
      <li class="target" style="cursor:pointer" link="page1.html"> 
        Grade 1 </li> 
      <li class="target" style="cursor:pointer" link="page2.html"> 
        Grade 2 </li>  
     </ul> 
     <div id="result" style="width:500px;height:500px;border:1px solid #000;"></div>

下面是使用IFrame

JavaScript代碼

$(document).ready(function() { 
     $(".target").click(function(e) { 
      var url = $(this).attr("link"); 
      $('#resultFrame').attr("src",url); 
     }); 
    });

HTML部分

<ul id="menu"> 
     <li class="target" style="cursor:pointer" link="http://www.iotasol.com"> 
       Grade 1 </li>  
    </ul> 
    <div id="result" style="width:500px;height:500px;border:1px solid #000;"><iframe id="resultFrame" style="width:100%;height:100%"></iframe></div>

來源

2013-06-06 07:51:08

不同的網頁加載在同一個容器

回答

相關問題