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

このようなもの

<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 に答える
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 に答える