選擇加載框架

-1

以下HTML代碼按預期工作。我需要的是一個下拉選項，用戶將選擇任何平臺，並且右框架將加載所需的文件。選擇加載框架

<a href="android.html" target="dynamic"> android form </a> 
<a href="J2ME.html" target="dynamic"> J2ME form </a> 
<a href="windows.html" target="dynamic"> windows form </a>

下面的html生成下拉選項，但如何使所需的頁面自動加載？

<form> 
Platform: 
<select name='platform'> 
<option>Android </option> 
<option> J2ME </option> 
<option> Windows </option> 

</select> 
</form>

來源

2012-04-09 shantanuo

  <html> 
      <head> 
      <script type="text/javascript"> 
      function loadFrame() 
      { 
      var s=document.getElementById("platform").value; 

      document.getElementById("loadContainer").innerHTML="" 
      var iframe = document.createElement("iframe"); 
      iframe.src = s; 
      document.getElementById("loadContainer").appendChild(iframe); 
      } 
      </script> 
      </head> 
      <body> 

      <div style="float:left"> 
      <form> 
       Platform: 
       <select id='platform' onchange="loadFrame()"> 
        <option value="android.html">Android</option> 
        <option value="J2ME.html">J2ME</option> 
        <option value="Windows.html">Windows</option> 
       </select> 
      </form> 
      </div> 

      <div id="loadContainer" style="float:right"></div> 
      </body> 
      </html>

來源

2012-04-09 10:11:15 srini

你可以嘗試這樣的變體：

首先，設定值，你的選擇是這樣，並設置onchange事件選擇元素：

<form> 
Platform: 
<select name='platform' onchange='loadFrame(this)' id='OSList'> 
    <option value="1.html">Android</option> 
    <option value="2.html">J2ME</option> 
    <option value="3.html">Windows</option> 
</select> 
</form> 
<div id="loadContainer"></div>

其次，創建一個功能，即創建一個帶有選定選項值的src的iFrame，並將其附加到某處（如div＃loadContainer）：

function loadFrame(comboBox) 
{ 
    var frame = document.createElement("iframe"); 
    frame.src = comboBox.options[comboBox.selectedIndex].value; 
    var container = document.getElementById("loadContainer"); 
    container.innerHTML = ""; 
    container.appendChild(frame); 
}

看一下例子here

如果能夠使用jQuery（或其他框架你可以結合到選擇onchange事件經由JS這樣的方式）：

var el = $("#OSList"); 
el.change(function() { 
    var frame = document.createElement("iframe"); 
    frame.src = el.val(); 
    $("#loadContainer").empty().append(frame) 
});

例here

來源

2012-04-09 09:14:44

我會建議使用比在HTML中定義一個更好的結合方式，通過類似的jQuery。 – 2012-04-09 09:34:04

  <html> 
      <head> 
      <script type="text/javascript"> 
      function loadFrame() 
      { 
      var select_value=document.getElementById("platform").value; 

      window.location =select_value; 
      } 
      </script> 
      </head> 
      <body> 

      <form> 
       Platform: 
       <select id='platform' onchange="loadFrame()"> 
        <option value="andriod.html">Android</option> 
        <option value="j2me.html">J2ME</option> 
        <option value="windows.html">Windows</option> 
       </select> 
      </form> 

      </body> 
      </html>

來源

2012-04-09 09:58:39 srini

您可以在頁面中添加一個空框架並直接更改其src，不需要檢索html內容，如如下：

<html> 
     <head> 
     <script type="text/javascript"> 
     function loadFrame(comboBox) 
     { 
     var frame = window.frames['platformFrame'], 
      src = comboBox.options[comboBox.selectedIndex].value; 
      frame.window.location.href = src; //use window.location to avoid browser capability. 
     } 
     </script> 
     </head> 
     <body> 

     <form> 
      Platform: 
      <select id='platform' onchange="loadFrame()"> 
       <option value="andriod.html">Android</option> 
       <option value="j2me.html">J2ME</option> 
       <option value="windows.html">Windows</option> 
      </select> 
     </form> 
     <iframe src="" id="platformFrame"></iframe> 
     </body> 
     </html>

來源

2012-04-09 10:09:01

選擇加載框架

回答

相關問題