3

我目前在 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>
4

3 回答 3

3

如果您想打开框架中的所有链接，那么您应该在文档 HEAD 部分中说明这一事实

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

我认为这就足够了。

更新

好的，这是另一种方式。

首先是您的链接样式，我只是使用了这些样式，但毫无疑问您有自己的样式。

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

更新二

<script type="text/javascript">
  //<!--
  function OpenInMyFrame(var1)
  {
    window.document.getElementById("MyFrame1").src = var1;
  }
  //-->
</script>
于 2013-04-23T00:09:18.060 回答
0

先生，谢谢您的帮助。我能够让它与以下内容一起工作。我只需要更改 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-23T23:48:49.783 回答
0

像这样的东西

<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 库，因为它使这变得简单。

编辑：更新我的例子实际上是正确的。还发现google不喜欢在iframe中打开，所以看起来它不起作用但它只是google很痛苦

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

     });
 </script>

这不是我的想法，我一直在喝这可能不准确

谢谢

于 2013-04-22T23:42:58.467 回答