前端iframe标签介绍及使用

使用的场景:

(1) 有重复的板块内容显示的时候

# 后端如果是模板渲染方式(得到页面是通过继承的形式),可以换成iframe来请求直接获取子功能页面

iframe标签的作用:

iframe标签可以实现html主页面嵌套html子页面,子页面可以是一个功能页面,在某些时候使用iframe非常的方便

# 所以如果是模板渲染方式的,前端就可以使用iframe标签节省一点网络带宽(传输的内容会少一些,并且主页面不会刷新,只是iframe在请求得到新的资源)。

模板渲染和iframe的对比:

(1) 子页面通过继承的方式去实现,并且实现了html页面功能的拆分

不好的地方:通过继承,表示渲染模板时候,会先去加载继承的页面,再加载子页面,这样模板页面也会在网络传输,这样会占一些无用的带宽

使用iframe后:页面通过模板渲染,也仅是某个功能页面,返回的时候,会少返回模板继承的部分

(2) 菜单点击效果(主页面可能有多个菜单),要在后端提前去渲染好用户点的哪个菜单,才能返回给用户新的页面

不好的地方:增加了后端编码的复杂度,需要通过if判断把点击效果也加在标签上面,这样后端又会吃一些cpu的资源

使用iframe后:由于前端只是发送src请求(仅改变子页面内容),主页面不会改变,所以菜单只需写好前端事件即可,这样就会少后端很多模板渲染的麻烦事,可以少渲染一些内容,效率也会提升一点。

模板渲染比iframe这种方式好的地方:

(1) iframe是一个url显示的所有功能页面,模板渲染可以通过不同的url,来得到不同前端信息界面,而iframe这种方式能看见的url只有首页的url,所以用iframe的话,一般只会一个url去操作,如果要获取某个功能页面,首次打开也只能通过鼠标点击,才能请求到那个功能页面,但是效率来说肯定是iframe方式会高一点

iframe标签的使用:

注:

(1) 下面都是使用的jquery的写法定位的标签,和原生js查找不同

(2) 它俩之间的转换

  jquery >>> dom  === $(‘iframe‘)[0]  : 关键是这个[0]

  dom >>> jquery  === $(dom定位到的标签)

格式:<iframe src=‘‘ frameborder=‘0‘></iframe>

属性:

src  # 获取html页面的url网址

frameborder  # 表示是否显示框架的边框,1显示,0不显示

1. iframe通过点击事件获取页面的写法

下面是点击搜索按钮的事件

# 这个是在iframe标签中场景,window.parent切换到父窗口

# 如果是在iframe外直接$(‘iframe‘).attr(‘src‘, new_url)即可

2. iframe的刷新页面及回退写法

# 先要找到iframe标签,在执行bom操作即可

(1) 在iframe标签中实现刷新

$(window.parent.document).find(‘iframe‘)[0].contentWindow.location.reload(true);

(2) 在iframe标签中实现回退

$(window.parent.document).find(‘iframe‘)[0].contentWindow.history.back();

(3) 主窗口的写法

$(‘iframe‘)[0].contentWindow.location.reload(true);

$(‘iframe‘)[0].contentWindow.history.back();

3.获取iframe的当前url

注:如果在iframe中切换了子页面的url,通过src只会取到第一次的给的src属性

$(window.parent.document).find(‘iframe‘)[0].contentWindow.location.href;

4.主页面和iframe子页面互相调用函数

使用场景:

(1) 模态框的弹出,不能说你模态通过子页面的点击,仅在子页面有模态框的效果

(2) 各种消息弹框的显示,不能说在子页面显示,会错位

4.1.在iframe中调用主页面的内容

window.parent.要调用的函数();

例子写法:

# 父页面中

# iframe中

4.2.主页面调用iframe的内容(没有试验)

$(‘iframe‘)[0].contentWindow.要调用的函数();

原文地址:https://www.cnblogs.com/zezhou/p/11517555.html

时间: 2024-10-18 04:34:31

前端iframe标签介绍及使用的相关文章

前端基础-HTML常用标签介绍

前端基础-HTML常用标签介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML是什么 1>.超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则: 2>.浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性): 3>.静态网页文件扩展名:".html "或 &qu

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var

iframe标签flash遮盖页面元素问题——wmode参数

最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(github地址:https://github.com/wangfupeng1988/wangEditor),通过配置一些参数,编辑器界面如下: 其中,视频功能,我改造了一下,原本的编辑器只能上传网络视频,我增加了上传本地视频的功能(扯远了..忽略我...),插入网络视频就是把各大在线视频网站上的视频分享链

iframe标签在PC端的使用

随着前端框架的崛起 各种组件化 模块化开发 然而我发现在PC端要考虑兼容 ~~~~ 自己琢磨着 在PC端怎么吧一个页面做成一个公共的部分  发现有个iframe标签可以在页面中嵌套 虽然iframe可以做成公共部分 但问题也是很多(PS:百度) <iframe src="../home/home.html" id="cont" frameborder="0" scrolling="no" width="100%

3.Struts2配置文件标签介绍

Struts2的很多核心功能都是由拦截器实现的. struts-default.xml中定义了这些拦截器与Result类型. 所以,不继承struts-default包,Struts2提供的很多核心功能是无法使用的. 1.package标签 配置包时必须指定name属性,该属性值可以任意取名,但必须唯一. 其与Java的类包间无对应关系.若其他包要继承该包,则必须通过该属性进行引用. 包的namespace属性用于定义该包的命名空间. 命名空间是访问该包下Action的路径的一部分. 此属性可以

如何利用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终效果不错的实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: 1 var date=new

html body里边的div标签中用 iframe标签 引入其他页面

<html> <body> <div>    <!-- 增加 iframe标签 使内容固定高度,不会超过div的大小  -->     <iframe height="100%" width="100%"  frameBorder=0 src="/JpkcSys/html/left.html"></iframe>     <!--iframe的 height和 widt

如何用iframe标签以及Javascript制作时钟?

如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面来讲: javascript中的Date引用类型 几种效果不佳的实例 <iframe>标签 最终不错的效果实例 如果大家想直接看最终不错的效果实例,可以直接点击这里. 第一部分:Date引用类型 1.日期对象可以直接使用new操作符和Date构造函数构造.代码如下: var date=new Da

使用iframe标签结合springMvc做文件上传

1.iframe.jsp <body> <h1>测试iframe文件上传</h1> <!-- 1.要求表单的target属性名称与iframe的name名字一致 2.iframe自身特性 1).iframe标签所在的页面称之parent(父)页面 2).iframe标签所包含的页面称之为子页面 3.本测试的子页面是:controller跳转的页面,即是ok.jsp --> <iframe name="aaa" width="