HTML iframe 实现功能页面动态切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Iframe</title>
<style type="text/css">

    .left{
        color:#0F0;
        border: #0F6 1px solid;
        width:20%;
        height:300px;
        float:left;
        text-align:center;
    }
        
    .right{
        color:#0F0;
        border: #30C 1px solid;
        width:79%;
        height:300px;
        position:relative;
        float:right;
        text-align:center;
    }

</style>

<script type="text/javascript">
  // 全局变量
  var src;
 
  //带参数函数
  function goToPage(param){
      document.getElementById("myIframe").src=param;
      src=param;
      // 打印传递过来的参数
      printf();
      //$("#myIframe").attr("src",param);
  }
 
   //无参数函数
  function printf(){
      alert(src);
  }
</script>
</head>

<body>
 <div id="left" class="left">left<br/>
          <a href="1index.html" οnclick="goToPage('1index.html')">1index</a><br/>
           <a href="2index.html"  οnclick="goToPage('2index.html')">2index</a><br/>
            <a href="3index.html"  οnclick="goToPage('3index.html')">3index</a><br/>
             <a href="4index.html"  οnclick="goToPage('4index.html')">4index</a><br/>
              <a href="5index.html"  οnclick="goToPage('5index.html')">5index</a><br/>
  </div>
     
 <div id="right" class="right">right<br/>
    <iframe id="myIframe" src="1index.html" style="height:230px;width:100%;" frameborder="0" >
        </div>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/boonyaxnn/article/details/52472111
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:17:50
阅读 ( 762 )
分类：前端

HTML iframe 实现功能页面动态切换

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看