深入剖析HTML5 内联框架iFrame

2019-09-08 郑州网站建设  

由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame

所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地嵌套下去。

示例如下:

/*

示例由index.html和iframe1.html、iframe2.html、iframe3.html组成

*/

先上一张效果图,图片后面是完整代码。

点击后

完整代码如下

index.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>index</title>  

</head>  

<!--注意,这里没有body元素-->  

index   

<a href="" frameborder="1">czp_2016のb日志</a>  

<br/>  

<iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>  

</html>  

iframe1.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>iframe1</title>  

</head>  

<body bgcolor="red">  

iFrame1   

<a href="" frameborder="1">czp_2016のb日志</a>  

<br/>  

<iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>  

</body>  

</html>  

iframe2.html

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>iframe2</title>  

</head>  

<body bgcolor="green">  

iFrame2   

<a href="" frameborder="1">czp_2016のb日志</a>  

<br />  


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1359.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • 现在
  • 由于
  • iframe
  • frame
  • fra