Iframe 定义内联的子窗口（框架）

Posted 2020-10-16 蓝心高飛

 1、Iframe 定义内联的子窗口（框架），用于在网页内显示网页

语法：

• <iframe src="URL"></iframe>URL 指向隔离页面的位置，height 和 width 属性用于规定 iframe 的高度和宽度。
• frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框。
• <iframe src="demo_iframe.htm" frameborder="0"></iframe>
• 链接的 target 属性必须引用 iframe 的 name 属性
• <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
• <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

iframe的概念：

• iframe是文档内的窗口，显示网页
• scrolling：是否出现的滚动条，yes、no、auto（默认）
• frameborder：是否出现边框，0表示无，1表示有
• marginwidth：内容与

<iframe src="http://www.baidu.com" frameborder="1" width="200" height="400"
marginwidth="500"marginheight="300" scrolling="auto">

• frameborder="1" 设置窗口边框大小
• width="200"  窗口宽
• height="400" 窗口高
• marginwidth="500"属性规定框架内容与框架的左侧和右侧之间的高度，以像素计，效果不大，很多浏览器都不支持
• marginheight="300" 属性规定框架内容与框架的上方和下方之间的高度，以像素计，效果不大，很多浏览器都不支持
• scrolling="auto" ，yes -- 显示滚动条，no -- 不显示滚动条，auto当需要时再显示滚动条，缺省值为autoscroll，中文"滚动轴"的意思

 2、frame框架

实例：

1 <form>
2 <a href="http://www.baidu.com" target="myiframe">打开百度</a>
3 <a href="http://www.qq.com" target="myiframe">打开百度</a>
4 <iframe src="http://www.qq.com" frameborder="1" width="500" height="500" 
5 name="myiframe">打开</iframe>
6 </form>

 

 

 注： a标签是一个超链接，target属性设置一个名字，为了跟框架窗口链接的，在窗口中也显示这个地 址的内容。

iframe（框架）里的src：属性设置了以地址，frameborder设置边框，即宽高，name属性设置为a 标签中的target名称

效果： 打开网页时，框架窗口的里会自动打开src所链接的地址内容，但是当你单击打开百度时，框架中
会显示iframe所设置的对应的target所在的a标签链接的地址。

a标签：

 3、a用做锚点：

<h2 id="top">哈哈</h2>，设置id
<a href="#top">返回顶部</a>，单击“返回顶部”即可返回到h2所在的 地方

还可返回到指定的位置，只有每个点设置相应的属性，如上。