HTML进阶之iframe元素

最新推荐文章于 2023-03-31 13:55:10 发布
最新推荐文章于 2023-03-31 13:55:10 发布
阅读量1k 收藏
点赞数
分类专栏： HTML进阶 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yihen0214/article/details/120019214
版权

iframe元素

框架页,通常用于在一个网页中嵌入另一个页面

><iframe src="https://www.douyu.com" ></iframe>

src中输入需要链接网站的地址,
在这里插入图片描述
该元素为可替换元素

  1. 通常是行盒
  2. 通常显示的内容取决于元素的属性
  3. CSS不能完全控制其中的样式
  4. 具有行块盒的特点

a元素可以通过target属性,在自己网站中打开别人网站

<iframe name="myframe" src="https://www.douyu.com" ></iframe>
<a href="https://www.taobao.com" target="myframe">淘宝</a>

在这里插入图片描述

iframe属性介绍

  1. scrolling,取值为no时,无滚动条,默认情况下,会产生滚动条
  2. frameborder,取值为no时,无边框,默认情况下,会产生边框
  3. 其他详细属性请到这里

在这里插入图片描述

传说中的懿痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端iframe标签介绍及使用
weixin_30952103的博客
09-13 1936
使用的场景： (1) 有重复的板块内容显示的时候 # 后端如果是模板渲染方式(得到页面是通过继承的形式)，可以换成iframe来请求直接获取子功能页面 iframe标签的作用： iframe标签可以实现html主页面嵌套html子页面，子页面可以是一个功能页面，在某些时候使用iframe非常的方便 # 所以如果是模板渲染方式的，前端就可以使用iframe标签节...
iframe允许嵌入的视频全屏播放
第7维度 - 日常笔记
05-25 5万+
iframe允许嵌入的视频全屏播放：设置 allowfullscreen="true" &lt;iframe src="http://xxx.com" allowfullscreen="true" frameborder="0"&gt;&lt;/iframe&gt;
如何使你的网页视频自动播放嵌入的iframe视频
星辰的笔记
03-26 7399
只需在视频链接后面接上?rel=0&amp;autoplay=1 <iframe height=500 width=880 src='https://player.youku.com/embed/XMzg0MDkyNTQ5Mg==?rel=0&amp;autoplay=1' frameborder=0 'allowfullscreen'></iframe>
HTML iframe 内嵌网页
就这样吧
07-02 3955
1. HTML <iframe src="https://cn.bing.com/" width="100%" height="500px"> </iframe> 2. 请求URL显示错误： Refused to display 'http://127.0.0.1:8000/show/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. X-Frame-Options：https://developer
js取得html iframe中的元素和变量值
12-09
上周想要取得iframe中的元素和js变量值，一直没取得，查资料得知： 不能用$(document).ready()方法，而是要用$(“#iframeId”).load()方法，待iframe加载完成，才能取得 取iframe中的js变量值： document.frames['x...
解析Jquery取得iframe中元素的几种方法
10-27
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作，需要的朋友可以参考下
HTML iframe 用法总结收藏
09-28
iframe是框架的一种形式，也比较常用到。
div嵌套html不用iframe
12-13
最近在做作业中需要在不用iframe的情况下嵌套页面，所以只好在div中嵌套，用的是jquery方法。 复制代码代码如下: [removed] $(document).ready(function() { $(“#button”).click(function() { $(“#content”)....
接入B站iframe视频(bilibili引用视频)
热门推荐
不知名的上班族-老王
06-28 8万+
文章目录前言已解决的坑按比例播放视频视频清晰度问题iPhone 播放自动放大问题解决自动跳转到B站APP (Universal Links)待填的坑各位大佬网站 前言 因为公司要搞一些视频给客户看, 然后对比了各种视频网站, 各种广告什么的, 体验都不好. 选来选去, 还是B站好, 而且自己又是B站大会员用户 ( 其实早就内定了 ✧(≖ ◡ ≖) ) 这里总结一下碰到的一些坑吧 已解决的坑 按比例...
iframe 内联框架
qq_51986661的博客
08-27 3807
iframe框架、a标签、链接、html笔记、前端。
视频播放问题一：iframe嵌入视频和 https网站不支持HTTP资源问题解决
wendyGao_Yin的博客
02-03 2万+
问题一： 因为Flash被淘汰，所以项目中的所有的视频都要换成了iframe嵌入： 为什么选iframe？ <embed> : 允许嵌入PDF，SVG <object>:同 <embed> <iframe> :能够将另一个HTML页面嵌入到当前页面中。 name="iframe" : 用于定位嵌入的浏览上下文的名称 frameborder="0" : 值为1（默认值）时，显示此框架的边框。值为0时移除边框,已废弃，使用 CSS 属性 border 代替
django2 用iframe标签完成 网页内嵌播放b站视频功能
weixin_30823833的博客
06-20 4819
前言： 　　给自己的网站中加入视频资源，有两种方法，一种是用iframe标签引用外站资源，另一种则使用video标签，获取站内资源进行视频播放。其中前者顾名思义，是将视频资源上传到视频网站中，然后通过引用的方式在站内播放视频，这种方法适用于视频资源内容公开免费，且不想花钱购买七牛云空间的开发者，毕竟是免费的嘛！而后者，则是需要有云空间存放视频资源才可以，不过后者的好处是，可以用于视频付费内容的开...
iframe嵌入本地视频或者http链接视频禁止自动播放
Aa12364567的博客
03-31 1万+
iframe嵌入本地视频或者http链接视频禁止自动播放
IFRAME 元素 | iframe 对象
KM3945[BLOG]
10-09 1559
IFRAME 元素 | iframe 对象创建内嵌浮动框架。成员表下面的表格列出了 iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。标签属性/属性 显示: 标签属性/属性 行为 集合 事件 滤镜 方法 对象 样式 行为 描述 clientCaps 提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。 download 下载文件并在下载完
在网页中使用iframe嵌入B站视频（腾讯视频同理）
DSH964的博客
07-08 5万+
先上效果：首先是自己的页面：点击图片后出现一个遮罩、遮罩上显示B站的视频：这个效果很常见，例如在索尼中国的网站中：点击图中的播放图标会出现腾讯视频的iframe窗口：那么下面来看代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt
【HTML 教程】iframe
web前端开发
12-06 1786
作者 |阮一峰<iframe>标签用于在网页里面嵌入其他网页。1、基本用法<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏...
iframe
kexijun20014的专栏
08-10 2348
  学习HTML：iframe用法总结收藏 收藏 是框架的一种形式，也比较常用到。 一：几个例子——演示iframe的基本用法例1：不用多说了，iframe的各个属性含义如下：width插入页的宽；height插入页的高；scrolling 是否显示页面滚动条（可选的参数为 auto、yes、no，如果省略这个参数，则默认为auto）；frameborder  边框大小；注意：URL建议用
iframe嵌套其它网站页面及相关知识点详解
Quentin0823的博客
01-31 2万+
在一个页面中嵌套另外一个页面，就要使用到框架 标签。 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
html中多iframe 中元素赋值
最新发布
05-24
在 HTML 中，可以使用 JavaScript 来获取和修改 iframe 中的元素值。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>多 iframe 中元素赋值</title> </head> <body> <iframe id="iframe1" src="iframe1.html"></iframe> <iframe id="iframe2" src="iframe2.html"></iframe> <script> // 获取 iframe1 中的元素并修改其值 var iframe1 = document.getElementById("iframe1"); var input1 = iframe1.contentWindow.document.getElementById("input1"); input1.value = "New Value 1"; // 获取 iframe2 中的元素并修改其值 var iframe2 = document.getElementById("iframe2"); var input2 = iframe2.contentWindow.document.getElementById("input2"); input2.value = "New Value 2"; </script> </body> </html> ``` 在上面的代码中，我们首先使用 `document.getElementById` 方法获取两个 iframe 元素。接下来，我们使用 `contentWindow.document.getElementById` 方法获取 iframe 内部的元素，并将其值设置为新值。请注意，由于 iframe 中的文档是另一个窗口的一部分，因此我们需要使用 `contentWindow` 属性来获取它的文档对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

传说中的懿痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值