Dropdown Options To Open Inside Iframe

December 27, 2023 Post a Comment

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 si

Solution 1:

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

<head><basetarget="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

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

Finally your links and iFrame

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

Update II

<scripttype="text/javascript">
  //<!--
  function OpenInMyFrame(var1)
  {
    window.document.getElementById("MyFrame1").src = var1;
  }
  //--></script>

Solution 2:

something like this

<selectid='selectLinks'><optionvalue='http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm'>CS1000 Name Change</option><optionvalue='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

<scripttype='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

Solution 3:

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 !!

<scriptlanguage="javascript"type="text/javascript">functionjump(form) {
var myindex=form.menu.selectedIndexif (form.menu.options[myindex].value != "0") 
{
window.open(form.menu.options[myindex].value, 
target="iframe1");
}
}
//--></script><formname="lissamenu2"ACTION=URI><selectname="menu"onchange="jump(this.form)"><optionvalue="0">Select</option><optionvalue="0"></option>   (this adds a space).
<optionvalue="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm">CS1000 Name Change</option></select></form>

Html5 Log