我目前有一個鏈接到我的iframe左邊的鏈接列表類似於一個菜單。但是，我很快意識到這不是一個可擴展的選項。我想要做的是創建一個簡單的下拉菜單，其中包含我所有的鏈接，並讓它們仍然在我的iframe中打開。下拉選項打開內部框架

我的一個鏈接的示例。

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

來源

2013-04-22 user2309241

您使用哪種語言？ – 2013-04-22 23:54:45

只是基本的HTML，我發現或幫助了一些有限的Java腳本。和一些php表單綁定到一個mysql數據庫。 – user2309241 2013-04-23 00:00:43

像這樣

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

那麼你就需要一些JavaScript來控制。我推薦jQuery庫，因爲它使這個簡單。

編輯：更新我的例子，實際上是正確的。還有研究發現，谷歌犯規喜歡的iframe被打開，所以看起來它不工作，但它只是谷歌正在痛苦

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

    }); 
</script>

這是從我的頭頂，我一直在飲用此如果你想在你的框架中打開ALL鏈接可能不準確

感謝

來源

2013-04-22 23:42:58

給我一個，我會告訴你，如果這個工程。 – user2309241 2013-04-22 23:50:10

建立了良好的下拉菜單，但不會顯示在文檔中。 – user2309241 2013-04-23 00:01:41

好的，以及我忘了一些事情..看看這個小提琴，我會相應地更新我的答案http://jsfiddle.net/VqQMC/4/ – 2013-04-23 00:14:44

，那麼你應該在你的文檔的HEAD部分說明了這一事實

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

我認爲這就夠了。

更新

好的這是另一種方法。

首先你的風格的鏈接，我只是使用這些stysles，但毫無疑問，你有自己的。

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

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

接下來的代碼來打開鏈接在iframe

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

最後你的鏈接和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>

更新II

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

來源

2013-04-23 00:09:18 Zeddy

我只想要在下拉菜單中的鏈接在我的iframe中打開。 – user2309241 2013-04-23 00:14:45

這看起來不像我的下拉菜單？ – user2309241 2013-04-23 01:13:11

對不起，我現在將其更改爲下拉列表 – Zeddy 2013-04-23 01:16:02

紳士，謝謝你幫助。我能夠使它與以下工作。我只是需要改變JavaScript來滿足我的需求。非常感謝！！

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

來源

2013-04-23 23:48:49 user2309241

下拉選項打開內部框架

回答

更新

更新II

相關問題