iframe的用法（html下一页）

老铁们，大家好，相信还有很多朋友对于iframe的用法和html下一页的相关问题不太懂，没关系，今天就由我来为大家分享分享iframe的用法以及html下一页的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

本文主要内容一览

• 1、可视化图怎样导入html里面
• 2、react动态加载iframe
• 3、iframe如何加速
• 4、在html页面中引入另一个html页面的标签

iframe的用法（html下一页）

1可视化图怎样导入html里面

导入方法如下：1、使用embed标签，这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。2、使用object标签，这个是W3C的规范，在HTML标准里有这个标签，这个标签里面不能使用js。3、使用iframe标签，这个标签可工作在任何浏览器中。

iframe的用法（html下一页）

2react动态加载iframe

react 嵌入 iframe 主要是为了隔离富文本，避免跟宿主环境的样式、变量等造成污染。

情况1：后端返回一个完整的网页，前端直接 `iframe src=$url/iframe` 就可以了。

情况2：后端返回内容不可控 (比如以下例子)。

用法：

index.tsx:

export default function Iframe () {

const contentIFrameRef = useRefHTMLIFrameElement(null)

const [iframeHeight, setIframeHeight] = useState(0)

useEffect(() = {

$api.xxxxx(xxx)

.then((res) = {

const iframe: HTMLIFrameElement | null = contentIFrameRef.current

if (iframe h1标题/h1）

iframeDocument.write(res)

// 如果需要 css，写入 css，此处的 css 是写在根目录里（与 index.html 同级）

if (!(iframeDocument.getElementsByTagName(link)[0])) {

const link = iframeDocument.createElement(link)

link.href = process.env.PUBLIC_URL + /template.css

link.rel = stylesheet

link.type = text/css

iframeDocument.head.appendChild(link)

}

// 这里动态计算 iframe 的 height,这里举例 300px

setIframeHeight(300)

}

})

}, [])

return (

iframe

ref={contentIFrameRef}

title=iframe

style={{ width: 1120, border: 0, height: strongiframeHeight/strong }}

sandbox=allow-same-origin allow-scripts allow-popups allow-forms

scrolling=auto

/iframe

)

}

如果后端把 iframe 的内容放在服务端，返给前端一个 url，可以直接 iframe src={Url}/iframe

3iframe如何加速

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？

答案很肯定 ：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。

Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

Iframe src=URL width=x height=x scrolling=[OPTION] frameborder=x/iframe

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height：画中画区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

Iframe src= width=250 height=200 scrolling=no frameborder=0/iframe

二、父窗体与浮动帧之间的相互控制

在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

Iframe src=test.htm id=test width=250 height=200 scrolling=no frameborder=0/iframe

test.htm文件代码为:

html

body

h1 id=myH1hello,my boy/h1

/body

/html

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

document.myH1.innerText=hello,my dear(其中，document可省)

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

如example.htm：

html

body οnclick=alert(tt.myH1.innerHTML)

Iframe name=tt src=frame1.htm width=250 height=200 scrolling=no frameborder=0/iframe

h1 id=myH2hello,my wife/h1

/body

/html

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为hello,my friend，我们就可以这样写：

parent.myH2.innerText=hello,my friend

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

点击阅读全文

打开CSDN，阅读体验更佳

网页加速系列_weixin_34259232的博客

网页加速系列(一)、 网页加速之图形处理篇 搜集到一些关于网站提速的资料,做一个系列,一些文章可能转或摘自网络。 (一)、 网页加速之图形处理篇 在维护网站的过程用,可能遇到过这样的情况:辛辛苦苦做出来的页面,但图片过多,网页结构...

14条让你的网页加速_ok7758521ok的博客

这本书里定义了14条让你的网页加速的方法,分别如下: 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put CSS at the top 6.Move JS to the bottom ...

“画中画”效果--谈IFRAME标签的使用

作者：秋实 文章来源：天极网页陶吧 纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下载，而只下载那些内容有变化区域的网页内容呢？ 答案很肯定：应用Iframe标记！ 一、I

继续访问

怎么让iframe加载内容速度更快，用target而不是用js更改iframe的src

$(.expmenu a).attr(target,main_frame); //这样比用js更改iframe的src加载内容更快

继续访问

ppt iframe加载项_PPT启动卡爆了?一招帮你瞬间提速!_血汗钱被抢的博客...

这里给大家解释一下,PPT 插件安装后默认是随软件一起打开的,所以我们得等插件加载完才能使用 Office,加载是需要一定时间的,这个时间长短取决于你电脑的配置。 哪有人会为了一个 PPT 去升级电脑配置嘛?!

网站建设html代码优化,网站设计代码优化让网站打开速度飞起来_别总叫...

(1)巧用IFRAME布局 巧用iframe加快网页打开速度。如果网页上插入一些广告代码,又不想让这些广告网站影响 度的话,那么,使用iframe最合适不过了。例如在某个首页上插入一些广告代码方法:将这些广告代码放到一个独立的页面去,然后在首页用if...

热门推荐 iframe标签用法详解

iframe标签用法详解

继续访问

iframe嵌套页面加载慢_web前端入门到实战：分析页面加载慢

一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，用户体验相当差，用户可能会直接走人，所以加载的时间对于一个网站来说还是相当重要的。那做项目的时候怎样分析页面的加载速度慢呢？首先我们要知道影响页面加载的因素JS性能太差，阻塞页面浏览器解析过程中，遇到script标签的时候，便会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，...

继续访问

提升页面加载速度的方案_聂曦r的博客_提升页面加载速度

、释放资源:手动将iframe的内存释放、定时器销毁等 五、DNS优化 减少DNS查询,首先要了解访问路由到页面加载这个过程中间的流程,当用户在浏览器回车瞬间浏览器会解析域名向服务器发起TCP的3次握手,建立连接后发起HTTP请求,服务器响应请求返回...

微前端实际应用:iframe、qiankun_偷吃零食的小猫咪的博客_前端...

在上面的基础中了解到,目前常用的微前端实现方案有多种,其中目前常见使用的是qiankun,以前常用的框架是iframe的微前端方案,下面我们先来学习一下之前的框架iframe实现微前端方案 1、iframe 1-1 iframe基本理解 在之前使用iframe的时候,是...

iframe嵌套页面加载慢_Chrome 现已支持延迟加载网页中的 iframe，速度翻倍提升

谷歌曾在 Chrome 76 中添加了对图片的延迟加载支持。近日，ChromeEng 经理 Addy Osmani 则宣布，该团队已将 iframe 的延迟加载作为标准功能，添加至了 Chrome 浏览器和 Chromium 浏览器中。该功能会延迟窗口外 iframe 的加载，直到用户将网页滚动到附近为止。此举可以节省数据、加快页面其他部分的加载速度，并减少内存使用量。Chrome 小组的研究表明...

继续访问

加快ui显示速度 by iframe

iFrame: 为了能并行的加载JavaScript，避免浏览器卡住(，我在页面的body标记的顶部的一个Iframe里加载JavaScript。在iframe里加载JavaScript增加了代码的复杂度(通过Closure，我们很好的解决了这个问题)，但是为了速度的提升，值得这样做。

继续访问

最新发布 速度html代码是什么问题,HTML－加速、再加速_html

来源：中国教程网web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度？答案是：不一定！实际上，有许多关于HTML与DHTML方面的技巧，它们原理简单而且上手容易。无论是技术高超的老手，还是初涉编程的菜鸟，领会这些都十分必要。明显HTML，暗渡“公用脚本”减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。比如：我们.

4在html页面中引入另一个html页面的标签

在html页面中引入另一个html页面的标签

1、用iframe标签

[代码]

2、用object标签

[代码]

扩展资料：

1、iframe标签定义及使用说明：