a 标签实现 iframe 效果及 iframe 子试图调用父试图的方法

最新推荐文章于 2024-02-24 08:00:00 发布

冉然

最新推荐文章于 2024-02-24 08:00:00 发布

阅读量890

点赞数

分类专栏： VUE html5

本文链接：https://blog.csdn.net/yangyanli0309/article/details/81205810

版权

html5 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

VUE

15 篇文章 0 订阅

订阅专栏

根据子试图的不同刷新主视图（json格式自己定义）

1、body中添加

<a v-for="(list,index) in navLists" class="add" :class="{ red:changeRed == list.id }"

@click="selectTab(list.id)" :href="list.srcFrom" target="targetStr">{{list.name}}

</a>

2、在iframe中添加οnlοad="IFrameResize()"

frameSpacing=0 marginHeight=0

frameBorder=0

noResize scrolling="no" width=100% height=100% vspale="0" src="first.html" id="childFrame" name="targetStr" οnlοad="IFrameResize()"></iframe>

3、主视图中添加子试图①，子试图中又添加iframe②

注意每个主视图中的（body和iframe）中都要放入加载οnlοad="IFrameResize()"

a、只需在子试图①中的（body）中加载οnlοad="IFrameResize()"，childFrame为最外层的iframe，

function IFrameResize() {

//alert(this.document.body.scrollHeight); //弹出当前页面的高度

var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象

obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度

}

b、只需在子试图②中（body）中加载οnlοad="IFrameResize()"，DetailChildFrame为第二层的iframe，

function IFrameResize() {

var obj = parent.document.getElementById("DetailChildFrame"); //取得父页面IFrame对象

obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度

console.log(obj.height)

}

4、a标签直接跳转

$("#childFrame").attr("src", 'register.html');

5、刷新整个父试图的窗口，回到最初加载时的页面

parent.location.reload();

6、iframe 子试图调用父试图的方法

localStorage.clear();
window.parent.click_go('login.html');function click_go(href){
    window.document.getElementById("childFrame").contentWindow.location.href = href;
}

冉然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
a 标签实现 iframe 效果及 iframe 子试图调用父试图的方法

根据子试图的不同刷新主视图（json格式自己定义）1、body中添加&lt;body onload="IFrameResize()"&gt;&lt;a v-for="(list,index) in navLists" class="add" :class="{ red:changeRed == list.id }"@click="selectTab(list.id)"
复制链接

扫一扫