選択時にフレームをロード

-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

あなたは、このようなバリエーションを試すことができます。

まず、このようなあなたのオプションの値を設定して、select要素のための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

あなたは（あなたがJSを経由して、このような方法で選択onchangeイベントに結合することができるか、他のフレームワーク）のjQueryを使用することができます場合：

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

私はjQueryのようなものを経由して、HTMLで定義されたものよりも良好な結合スキームを使用することをお勧めします。 –

  <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

選択時にフレームをロード

答えて

関連する問題