iframe 实现同一页面跳转

iframe

src:该属性指定url,指定iframe讲装载哪个页面。

name:设置该iframe的名字。

scrolling:设置是否在iframe中显示滚动条。该属性支持（yes)(显示滚动条)、no（不显示滚动条)和auto(iframe大小不够时显示滚动条，否则不显示滚动条)

height,width:设置高宽，可以是像素值，也可以是百分比。

frameborder:设置是否显示iframe的边框。

srcdoc:不支持时出现的画面

用iframe和a标签实现俩个div之间的跳转

一、首先我们先写俩个div,一个作为跳转的（头）。另一个作为跳转的（尾）

二、在“头”div设置一个<a href="  " target="  ">text</a>的代码段  href的值是实现跳转的链接，target的值是实现跳转的位置。

三、在“尾”div里面的<iframe>标签里面用name=" "来接收   

   "头"div的target属性值和“尾”div的name必须一致，否则无法实现跳转。

 

好了，现在我们来看看简单的代码：

	<!-- 这是跳转的div-->
    <div style="float:left;border:1px solid black;width:20%;height:600px;">
	<!--这是网上的百度链接-->
		<li><a href="https://www.baidu.com" target="box">baidu1</a></li>
    <!--下面俩个是我电脑本地的链接-->
		<li><a href="../锚点归纳作业/text1.html" target="box">作业</a></li>
		<li><a href="../A标签/列表.html" target="box">列表</a></li>
    <!--这是网上的W3school网页链接-->
		<li><a href="http://www.w3school.com.cn/" target="box">W3</a></li>

	</div>
	
    <!-- 这是被跳转的div-->
	<div style="float:left;border:1px solid black;width:78%;height:600px;">
	<iframe src="https://www.baidu.com" width="100%" height="100%" frameborder="0" name="box" >主页面内容</iframe>

	</div>

代码效果图：

 

看图；点击左边div的链接可以在右边的div展现出来。

看代码；第二div的src=""https://www.baidu.com",是页面一开始出现的默认页面，如果不写的话，右边的div刚一加载会被默认空白。

属性：frameborder="0" 是清楚了iframe的边框。

注意看代码中的第一个div的target的属性值和第二个div的name的属性值都是："box"(这俩个必须一样)，属性值可以随便设置，但是俩个得一样。