iframe--浮动窗口

来源：互联网发布：手机图片后期制作软件编辑：程序博客网时间：2024/05/21 10:25

在上一篇文章中我们说到，frameset框架在使用时，该页面不允许出现body和body体。但有时我们需要在一个含有<body>体的页面嵌入另外一个页面，形成画中画的效果，怎么处理？这时我们就用到iframe元素(浮动窗口)

接下来我们就以一个案例为例，介绍iframe是怎样使用的。

首先先看一下最后的效果图：

从这个图中我们可以看出：网页主体含有一行文字和一个嵌入的框架，并且在该嵌入的框架中显示百度的主页。那么这种效果是怎样做出来的呢，下面上代码。

<!DOCTYPE html><html><head> <title>这是一个浮动窗口</title></head><body> 这是一个浮动窗口案例<br/> <iframe src="http://www.baidu.com" width="500px" height="300px"/></body></html>

观察代码我们可以得知：在body块内部，确实嵌入了另外一个页面，用了一个全新的元素--iframe.

如果想要点击一个超链接后，超链接的页面替换该框架的页面，就用到了我们上一篇文章中写道的知识--用target

代码如下：

<!DOCTYPE html><html><head> <title>这是一个浮动窗口</title></head><body> 这是一个浮动窗口案例<br/> <a href="http://blog.csdn.net/" target="iframe1">链接到CSDN博客</a><br/> <iframe src="http://www.baidu.com" name="iframe1" width="500px" height="300px"></iframe></body></html>

效果图：

点击前：

点击后：

这样，就可以实现在body内嵌入另一个页面了，并且可以利用超链接，在点击超链接后，可以将页面替换掉。当然一个网页中也可以实现多个框架共存，只要多写几个<iframe src="xxx">xxx</iframe>就可以了。

阅读全文

0 0