Dropdown options to open inside Iframe

2019-07-10 18:54发布

站内问答 / 后端开发
1012 3 5

I currently have a list of links to the left of my iframe sort of like a menu. However, I have quickly realized that is not a very scalable option. What I want to do is create a simple drop down menu with all my links inside of it, and have them still open inside of my iframe.

Example of one of my links.

<li>
  <a href="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm"
    target="iframe1">CS1000 Name Change</a>
</li>

3条回答
我欲成王，谁敢阻挡
2楼-- · 2019-07-10 19:36

If you want to open ALL links in your frame, then you should state this fact in your document HEAD section

<head>
  <base target="iframe1">
</head>

And I think that is enough.

Update

Okay here is another way.

first your styles for links, i just used these stysles but no doubt you have your own.

.menulink
{ 
  color: #0000FF;
  cursor: pointer;
}

.menulink:hover
{ 
  color: #FF0000;
  cursor: pointer;
}

Next the code to open the link in the IFrame

<script type="text/vbscript" id="OpenInMyFrame">
  ' <!--
  Function OpenInMyFrame(LinkUrl)
    window.document.getElementById("MyFrame1").src = LinkUrl
  End Function
  ' -->
</script>

Finally your links and iFrame

<ul id="MyMenu">
  <li class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</li>
  <li class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</li>
  <li class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</li>
  <li class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</li>
</ul>
<iframe id="MyFrame1" name="MyFrame1" style="width: 1040px; height: 682px" src="Default.aspx">

</iframe>




<select id="MyMenu">
  <option class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</option>
  <option class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</option>
  <option class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</option>
  <option class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</option>
</select>

Update II

<script type="text/javascript">
  //<!--
  function OpenInMyFrame(var1)
  {
    window.document.getElementById("MyFrame1").src = var1;
  }
  //-->
</script>
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-07-10 19:43

Gentleman, thank you for the help. I was able to get it working with the following. I just needed to change the javascript to suit my needs. Thank you so much !!

    <script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0") 
{
window.open(form.menu.options[myindex].value, 
target="iframe1");
}
}
//-->
</script>

<form name="lissamenu2" ACTION=URI>
<select name="menu" onchange="jump(this.form)">
<option value="0">Select</option>   
<option value="0"></option>   (this adds a space).
<option value="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm">CS1000 Name Change</option>
</select>
</form>
查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
4楼-- · 2019-07-10 19:48

something like this

<select id='selectLinks'>
    <option value='http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm'>CS1000 Name Change</option>
    <option value='http://www.officedepot.com'>Go to Office Depot.com</option>
</select>

Then you would need some javascript to control this. I recommend jQuery library because it makes this simple.

EDIT: Updated my example to actually be correct. Also found that google doesnt like to be opened in an iframe, so it looks like it doesnt work but its just google being a pain

<script type='text/javascript'>
    $(document).ready(function(){
        $("#selectLink").on("change", function(){
            var link = $(this).find("option:selected").val();
            $("#iframe1").attr("src", link);
         });                        

     });
 </script>

this is off the top of my head and I've been drinking this might not be exact

Thanks

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)