当前位置: 首页 > Web前端 > HTML

零基础教你学前端——42.iframe

时间:2023-04-02 23:14:24 HTML

先看一个例子:在这个网页中,三个网站同时显示在一个页面上:千峰教育官网、千峰教育HTML5前端官网、千峰教育HTML5大前端好程序员官方网站。这是怎么做到的?其实也不难,使用iframe就可以实现。iframe的作用是在一个网页中显示另一个网页。iframe是一个双标签,基本语法是:带锐角的iframe,带锐角的/iframe。iframe标签有五个基本属性:src属性,资源的意思,用来引入其他网站的页面,值为一个页面路径。width属性,宽度的意思,用来控制导入页面的宽度,取值是一个数字。height属性,高度的意思,用来控制导入页面的高度,取值是一个数字。frameborder属性表示框架边框。默认导入的框架有边框。通常,该属性的值设置为0以取消边框。scrolling[?skr??l??]属性,滚动的意思,用来控制是否显示frame的滚动条。一共有三个值:auto,在需要滚动条的时候出现,也是默认值。是的,总是显示滚动条。不,从不显示滚动条。让我们举个例子。打开编辑器,新建iframe-demo.html文件,完成基本代码,在body中添加iframe标签,首先定义src属性,值为http://www.qfedu.com,frameborder属性值设置为1,显示边框。保存页面。在浏览器中打开页面。千峰教育官网显示在iframe默认大小的窗口中。返回编辑器,为iframe定义宽度和800,高度等于600等属性,保存。回到浏览器,刷新,iframe窗口变大。可以通过滚动条查看网站内容。回到编辑器,如果给iframe定义一个scrolling属性,值为no,滚动条就会消失。返回浏览器并刷新。此时无法查看窗口的隐藏内容。iframe也可以用作链接的目标框架。链接的目标属性必须设置为iframe的名称属性。例如定义iframe的name属性值为iframe_a,将linka的target属性值设置为iframe_a。这样,当点击链接的时候,就会在这个iframe窗口中打开前锋教育的官网。千峰教育我们再来看一个例子。当点击三个链接时,iframe中显示对应链接的网站。让我们来实现这个例子。回到编辑器,新建一个iframe-example.html文件,完成基本代码,在body中添加一个div容器,在容器中添加一个iframe,定义属性src等于http://qfedu.com,width等于800,高度等于600。保存。在浏览器中打开页面,一个iframe框架就做好了。回到编辑器,在body的第一行添加一个div容器,在容器中写入emmet命令:一个方括号hrefspacetargetequalsiframe_agreaterthansignb乘以3,a[hreftarget=iframe_a]>b*3按tab键自动补全代码。显然,这不是我们想要的代码。怎么办?聪明的你一定想到了,在小学数学中,设置运算优先级的规则是通过加括号来设置的。我们在a的前面和b的后面放一对括号,(a[hreftarget=iframe_a]>b)*3我们把这个emmet放到注释里保存。将光标移动到emmet语句的末尾,然后按Tab。生成预期的代码。如果你是完美主义者,对这段代码不满意,能不能换行显示三个a标签?大家跟我一起做吧:点击VSCode左下角的齿轮图标,然后点击设置,打开设置窗口。点击扩展菜单,然后点击emmet,找到SyntaxProfiles,在settings.json中编辑。这里输入html冒号花括号,花括号里写inline_break冒号2,表示标签个数大于两组,换行显示。"html":{"inline_break":2},关闭设置。复制刚才保存的emmet命令,按tab键,完美代码生成!为三个a标签填写链接地址和文字内容。这里需要注意的是,链接的地址可以是互联网的网站地址,也可以是自己做的本地页面的地址,这些页面都可以显示在iframe中。我们发现三个链接的target属性都指向同一个iframe。保存页面。返回浏览器并刷新。分别点击三个链接,三个网站的页面分别显示在iframe中。文章配套视频链接https://www.bilibili.com/video...