

お世話になります。

構成としてはタブコンテンツがあり、タブはそれぞれiframeの動画プレイヤーが入っています。  
これらはjsで表示制御されており、タブを押すと該当の動画プレイヤーが表示切り替えされている状態です。  
しかし、iframe同時に読み込むと時間が掛かってしまうため、タブを押下したタイミングで必要なiframeだけ読み込むようにしたいです。この場合ajax等が考えられるのでしょうか。

ページをリロードしするイメージでそれぞれ読み替える処理が理想なのですが、発想が貧困で解決方法が分かりません。何か良い方法はあるでしょうか。

[code]

    <div class="tabbox"><p class="tabs">
      <a href="#tab_1" class="tabMenu" name="tab_1" onclick="ChangeTab(\'tab_1\'); return false;">tab1</a>
      <a href="#tab_2" class="tabMenu" name="tab_2" onclick="ChangeTab(\'tab_2\'); return false;">tab2</a>
      <a href="#tab_3" class="tabMenu" name="tab_3" onclick="ChangeTab(\'tab_3\'); return false;">tab3</a>
     <div id="tab_1" class="tab"><iframe></div>
     <div id="tab_2" class="tab"><iframe></div>
     <div id="tab_3" class="tab"><iframe></div>
    </div><!-- tabbox -->
    
[/code]

[code]

        // タブ制御
        function ChangeTab(tabName) {
           // 全部消す
             if(document.getElementById('tab_1') != null) {
                document.getElementById('tab_1').style.display="none";
             }
             if(document.getElementById('tab_2') != null) {
                document.getElementById('tab_2').style.display="none";
           }
             if(document.getElementById('tab_3') != null) {
                document.getElementById('tab_3').style.display="none";
           }
    
           // 指定箇所のみ表示
           var e = document.getElementById(tabName);
           e.style.display="block";
    
           // カレントタブ制御
           var tabs = document.getElementsByClassName("tabMenu");
           for(var i=0; i<tabs.length; i++) {
              tabs[i].classList.remove("active");
           }
    
           document.getElementsByName(tabName)[0].classList.add("active");
    };
    
[/code]


CC BY-SA 3.0
2016-08-15T01:18:16.870
28265
2016-08-16T05:00:11.130
18470
question
javascript php html
同一ページ内の再読み込み処理


getElementByIdで指定タブのCSSを切り替えられるなら、innerHTMLでiframeタグを差し込むだけです。

> ページをリロードしするイメージ

タブの数だけページを生成してしまうのも手かと思います。


CC BY-SA 3.0
2016-08-16T05:00:11.130
28303
2016-08-16T05:00:11.130
2605
28265
answer