JQuery加載div中的內容

-1

我在使用JQuery加載html時遇到困難。以下example是從另一個帖子中借用的。我無法在Chrome中正常工作。有人可以幫助我整理代碼，以便爲所有瀏覽器進行優化嗎？謝謝。JQuery加載div中的內容

$(document).ready(function() { 
    $("#selectchoice").change(function() { 

     var selectedOption = $('#selectchoice :selected').val(); 
     $containerDiv = $('#get_content'); 
     $containerDiv.html(""); 
     switch (selectedOption) { 
      case "1": 
       $containerDiv.html("http://www.google.com/index.html"); 
       break; 
      case "2": 
       $containerDiv.load("http://www.yahoo.com/index.html"); 
       break; 
      case "3": 
       $containerDiv.load("http://www.bing.com/index.html"); 
       break; 
      default: 
       $containerDiv.load(""); 
       break; 
     } 
     return true; 
    }); 
}); 

<select id="selectchoice"> 
    <option>Select a choice</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select>

來源

2013-09-26 user2340706

由於[同源策略]（http://en.wikipedia.org/wiki/Same-origin_policy），以您所處的方式向第三方域發出AJAX請求將不起作用。 –

可以添加更多這個jsfiddle我創建，以便我可以看到實際問題.http：//jsfiddle.net/KbHh7/ –

我的意圖是通過下拉菜單打開與nvd3.js內容的各種頁面。如果這不能用JQuery完成，那我還有其他什麼選擇？ – user2340706

您可以嘗試以下操作：

// Add iframe in div 
<div id = 'get_contentdiv' style="height:400px;width:500px"><iframe width=400px height=400px src="" id="get_content"></iframe></div>

JavaScript代碼：

$(document).ready(function() { 
    $("#selectchoice").change(function() { 
     var selectedOption = $('#selectchoice :selected').val().trim(); 
     $containerDiv = $('#get_content'); 
     $containerDiv.html(""); 
     switch (selectedOption) { 
      case "1": 
       $containerDiv.attr("src","http://www.google.com"); 
       break; 

      case "2": 
       $containerDiv.attr("src","http://www.yahoo.com"); 
       break; 

      case "3": 
       $containerDiv.attr("src","http://www.bing.com"); 
       break; 

      default: 
       $containerDiv.html(""); 
       break; 
     } 
     return true; 
    }); 
});

這裏演示：http://jsfiddle.net/PLuyu/3/

來源

2013-09-26 10:50:38

是否有可能取代默認情況下讓它加載一個初始頁面，而不是一個空白的iframe？ – user2340706

您不能使用XHR加載遠程頁面。嘗試使用iframe對象是這樣的：

// html 
<iframe src="" id="remotesite"></iframe> 

// and the script 
document.getElementById('remotesite').load = function() { 
// i'm loaded ;) 
}; 
document.getElementById('remotesite').src = 'http://www.google.fr';

小提琴;） http://jsfiddle.net/692D2/

來源

2013-09-26 10:27:00

原諒我，但我不太清楚如何完全實施此解決方案。 – user2340706

這裏有一個很好的實現小提琴：http://jsfiddle.net/692D2/ –

是否有可能取代默認，讓它加載一個初始頁面，而不是一個空白的iframe？ – user2340706

JQuery加載div中的內容

回答

相關問題