使用下拉菜单加载iframe的src然后更改

时间:2014-11-28 10:41:04

标签: javascript html iframe

我有以下代码

<script type="text/javascript">
 function newSrc() {
  var e = document.getElementById("MySelectMenu");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementById("MyFrame").src=newSrc;
 }
</script>

<iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0"     height="90%" id="MyFrame"></iframe>

<select id="MySelectMenu">
<option value="http://www.example.com">Example Site 1</option>
<option value="http://www.example2.com">Example Site 2</option>
</select>
<button onClick="newSrc();">Load Site</button>

这很好用,它根据从菜单中选择的选项加载iframe的源。现在,我想做的是,在从下拉菜单中选择选项并单击“加载站点”按钮后,将选项中的源加载到iframe中,然后在if ...之后重定向iframe ONCE。 .1秒。

因此,如果选择了示例站点2,则用户单击加载站点,加载http://www.example2.com,然后将iframe重定向到http://www.example2.com/admin

由于

1 个答案:

答案 0 :(得分:1)

试着帮忙!这是一个解决方案(工作示例,您可以使用代码http://jsbin.com/cakuh/1/),它只是一个草图,但您应该了解该怎么做:

  <iframe name="content" src="" style="position: absolute; left: 0px; top: 28px;" allowtransparency="true" border="0" scrolling="yes" width="100%" frameborder="0"     height="90%" id="MyFrame"></iframe>

  <select id="MySelectMenu">
  <option value="http://www.games.com">Games</option>
  <option value="http://www.bbc.com">BBC</option>
  </select>
  <button>Load Site</button>

$(function(){

  $('button').on('click', function(){
     var src = $("#MySelectMenu option:selected").attr('value'),
         myTimeout = null;  

    // first we de-attach and re-attach an event load
    $('iframe[name="content"]').off('load').on('load', function(){
     myTimeout = setTimeout(function(){

       clearTimeout(myTimeout);
       $('iframe[name="content"]').off('load');

       // you see, we concat '/admin' to the src
       $('iframe[name="content"]').attr('src', src + '/admin');

    }, 1000);        

    });

    // this will change the iframe src and load the page, triggering the iframe load event
    $('iframe[name="content"]').attr('src', src);

  });

});