选择加载框架

-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

选择加载框架

回答

相关问题