html基础（五）——框架

最新推荐文章于 2023-12-07 15:26:41 发布

HuiDT

最新推荐文章于 2023-12-07 15:26:41 发布

阅读量163

点赞数

分类专栏： HTML+CSS 文章标签： html框架 web iframe

本文链接：https://blog.csdn.net/qq_42842786/article/details/98514078

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

主流浏览器及其内核
iframe

主流浏览器及其内核

浏览器	内核
IE	Trident
Chrome	Blink（WebKit的一个分支）
Firefox	Gecko
Safari	WebKit
Opera	Presto（已废弃），现使用谷歌的Blink

iframe

通过框架可以再浏览器中显示不止一个页面，也可以将其设置为运行但不显示
【例】想要给自己的网站添加一个背景音乐，怎么做？
这就可以通过iframe实现，display:none即是设置了不显示页面，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>

  <body>
    
    <iframe  
      frameborder="0"
      src="http://www.yama.gz.cn/resourse/%E5%A4%9Aagent.mp3">
    </iframe>

    <iframe
      width="400"
      height="200"
      name="pramada"
      src="http://www.yama.gz.cn/resourse/about/">
     
    </iframe>  
    <p><a href="http://www.yama.gz.cn/resourse/%E9%80%80%E4%BC%8D.html" target="pramada">click me</a></p>
    <p><b>点击链接时对应的页面会显示在iframe框架中。</b></p>
  </body>
</html>

效果如图，在自己电脑上运行时会出现嘈杂的背景音乐，因为两个<iframe>引入了两个东西，一个是左边的bgm，只播放一次，另一个是右边的网站，它的bgm是一样的，并且循环播放，所以开始会出现两个音乐，但右边网页的实现方式不是<iframe>，感兴趣的可以自己看网站源代码
点击查看

注意这里有两个页面

<iframe>具有width、height属性,可通过frameborder="0"移除边框
使用iframe来显示目标链接页面

<iframe>比较简单，没啥好说的，之所以我会发现是因为当初想给个人站加bgm，但是发现<audio>标签自动播放会被Chrome阻止，求救网友才了解到<iframe>，当然除了<iframe>也还有其他的解决方式

HuiDT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html基础（五）——框架

iframe通过框架可以再浏览器中显示不知一个页面，也可以将其设置为运行但不显示【例】想要给自己的网站添加一个背景音乐，怎么做？这就可以通过iframe实现，display:none即是设置了不显示页面，<!DOCTYPE html><html> <head> <meta charset="utf-8"> </hea...
复制链接

扫一扫