页面结构之iframe内联框架

iframe内联框架 iframe+tab问题待解决


首先,我们可以在b站复制一个嵌入代码


直接复制到body内

<body>
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>

运行结果如下,这个视频是可以直接播放的


我们自己写一个!

<iframe src="https://www.bilibili.com/" name="hello" frameborder="0" width="1000px" height="600px"></iframe>

成功实现了用内联框架浏览b站

但是有一个问题:为什么有些网站会显示拒绝连接呢?(待解决)

链接:https://blog.csdn.net/qq_34093082/article/details/102951299

这个链接下的文章给到了部分解决方案,但是不彻底。搞不明白~~回头再来解决这个问题


知识点总结:

  1. 所谓的内联框架就是在生成网页内设置一个自定大小的框架,可以在这个框架内访问一些网页
  2. 标签内容
<!--iframe 内联框架
src : 引用页面地址
width height : 宽度,高度
name : 框架标识名
-->
  1. 既然框架有标识名name,我们是否可以通过超链接标签在这个框架内部访问其他网站呢?

答案是可以的,将超链接标签的target即打开位置设置为框架的标识名即可

<iframe src="https://www.bilibili.com/" name="hello" frameborder="0" width="1000px" height="600px"></iframe>

<a href="https://www.4399.com" target="hello">点击跳转</a>

运行以后,点击页面的"点击跳转"文本就会在框架"hello"内访问"4399"网页

本来我们是在框架内访问bilibili的

点击"点击跳转"链接以后,成功在框架内访问4399

一个小思考:

不知道bilibili的悬浮播放窗口功能是不是这样实现的呢,hh~~


posted @ 2022-04-21 21:52  无关风月7707  阅读(234)  评论(0编辑  收藏  举报