iframe使用小结

iframe使用小结、案例

虽然iframe框架技术已经非常老旧,但因为项目要求不得不品尝这一口老坛酸菜，框架的缓存机制和缓慢的响应速度恶心了我一整个项目开发周期，尽量不要用它

1、使用vue,实现单页面内,点击侧边栏与tab栏,新增、切换、删除iframe标签页

html代码示例:

         <!-- tab栏,可点击切换,删除标签页 --><nav class="hdNav"><ul class="clearfix"><liv-for="(item, index) in navList":key="index":class="{'act':item.xid==navActObj.xid}"@click='navClick(item)'>{{item.title}}<span @click.stop='navClose(item)'></span></li></ul></nav>

                 <!-- elementUI的菜单栏,点击可添加/切换iframe标签页 --><el-menuclass="el-menu-vertical-demo"text-color="#000"active-text-color="#fff":default-active="menuAct":active="menuAct"><!-- 可通过 active属性绑定变量，更改变量的值即可改变菜单内激活的项 --><el-submenuv-for="(obj, index) in menuList":key="index":index="obj.code"><!-- index为菜单的唯一标识 --><template slot="title">{{obj.name}}</template><el-menu-itemv-for="(item, ind) in obj.children":key="ind":index="item.code"@click='menuClick(item)'>{{item.name}}</el-menu-item></el-submenu></el-menu>

                 <!-- iframe标签  通过遍历 存放标签页的数组,生成--><iframev-for="(item, index) in navList":key="index":src="item.iframeSrc"frameborder="0":class="{'act':item.xid==navActObj.xid}"></iframe><!-- 通过判断当前激活的标签栏的id,动态添加class,显示 -->

js代码:

methods: {//菜单栏点击事件  将菜单对象传入,进行判断menuClick: function (obj) {let ii = this.navList.findIndex((item) => {return item.xid == obj.xid;});if (ii == -1) {//新的一级菜单的页面,添加this.navList.push(obj);} else if (this.navList[ii].iframeSrc != obj.iframeSrc) {//旧的一级菜单的新页面,覆盖this.navList.splice(ii, 1, obj);}//旧的一级菜单的旧页面,就直接切换标签页,显示旧iframethis.navActObj = obj;this.menuAct = obj.code;},//tab标签栏点击事件  切换激活的标签页,更改菜单栏的激活变量navClick: function (obj) {this.navActObj = obj;this.menuAct = obj.code;},//tab标签页关闭事件   删除标签页,进行判断navClose: function (obj) {let ii = this.navList.findIndex((item) => {return item.xid == obj.xid;});let newI;let len = this.navList.length;if (len == 1) {//数组长度仅为一,代表删除后无任何标签页,置空this.navActObj = { xid: -1, code: "0" };this.menuAct = "0";} else {//判断当前标签页是否为最后一项,//不是时,将数组的后一位标签页激活,//是最后一项时,将前一位激活newI = ii != len - 1 ? ii + 1 : ii - 1;this.navActObj = this.navList[newI];this.menuAct = this.navActObj.code;}this.navList.splice(ii, 1);//删除当前项},},

2、iframe子页面调用父级页面的函数

window.parent iframe页面调用父页面对象

父级页面：

function indexAddPage(obj){app.menuClick(obj);
}

子级iframe页面:

let obj1 = {name:'123',iframeSrc:'http://baidu.com'
}
window.parent.indexAddPage(obj1);

iframe使用小结相关推荐

iframe语法小结
IFrame语法小全 IFrame可以在网页内嵌入另一个页面,类似"画中画"形式. 标记的使用格式是: <Iframe src="URL" width=& ...
firefox与ie 的javascript区别
Document.form.item 问题现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 firefox ...
php监听iframe加载完成,window_IE iframe的onload方法分析小结，判断iframe是否加载完成的完美 - phpStudy...
IE iframe的onload方法分析小结判断iframe是否加载完成的完美方法IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方 ...
jQuery操作iframe中js函数的方法小结
1.jquery操作iframe中的元素(2种方式) ? 1 2 var tha = $(window.frames["core_content"].document).find( ...
前端小结（5）---- iframe
iframe对应的div: <divid="iframezone"><iframeid="iframe"frameborder='0'scro ...
2015第25周三iframe小结
一个 HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问,例如从一个框架中引 ...
正则表达式(括号)、[中括号]、{大括号}的区别小结
正则表达式(括号).[中括号].{大括号}的区别小结 </h1><div class="clear"></div><div class=& ...
使用P3P共享Cookie与Session小结
P3P是什么 P3P是一种被称为个人隐私安全平台项目(the Platform for Privacy Preferences)的标准,能够保护在线隐私权,使Internet冲浪者可以选择在浏览网页时 ...
解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&quo ...

iframe使用小结

iframe使用小结、案例

虽然iframe框架技术已经非常老旧,但因为项目要求不得不品尝这一口老坛酸菜，框架的缓存机制和缓慢的响应速度恶心了我一整个项目开发周期，尽量不要用它

1、使用vue,实现单页面内,点击侧边栏与tab栏,新增、切换、删除iframe标签页

2、iframe子页面调用父级页面的函数

iframe使用小结相关推荐

最新文章

热门文章