<div id="myIframeId">  
<iframe
ref="myIframe"
name="odpIframeName"
:src="iframeUrl"
frameborder="0"
align="middle"
width="100%"
height="100%"
/>
</div>

背景:

frame嵌套的页面:高度默认很小,而且如果不在相同域名,无法访问内部的DOM元素

1.如果设置固定的高度,部分屏幕部分满足需求,这里使用动态获取浏览器屏幕高度的方法设置:这里去除顶栏100px高度,自适应屏幕

autoheight () {
let winHeight = 0
if (window.innerHeight) { winHeight = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight }
if (document.documentElement && document.documentElement.clientHeight) { winHeight =
document.documentElement.clientHeight }
document.getElementById('myIframeId').style.height = winHeight - 100 + 'px'
}
  mounted () {
this.autoheight()
window.onresize = () => {
return (() => {
this.autoheight()
})()
}
}

2.如何操作iframe内部的DOm:

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
console.log("window",iwindow);//获取iframe的window对象
console.log("document",idoc); //获取iframe的document
console.log("html",idoc.documentElement);//获取iframe的html
console.log("head",idoc.head); //获取head
console.log("body",idoc.body); //获取body

更简单的方法:通过name获取

console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);

也可以获取父元素的Dom

window.parent 获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象,即,就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self(脑残)

推荐参考:http://caibaojian.com/js-get-iframe.html

<template>
<iframe :src="urlPath" class="iframe" ref="iframe"></iframe>
</template> <script>
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
export default {
name: 'nxframe',
data() {
return {
urlPath: this.getUrlPath() // iframe src 路径
}
},
created() {
NProgress.configure({ showSpinner: false })
},
mounted() {
this.load()
this.resize()
},
watch: {
$route: function() {
this.load()
},
routerPath: function(val) {
// 监听routerPath变化,改变src路径
this.urlPath = this.getUrlPath()
}
},
methods: {
// 显示等待框
show() {
NProgress.start()
},
// 隐藏等待狂
hide() {
NProgress.done()
},
// 加载浏览器窗口变化自适应
resize() {
window.onresize = () => {
this.iframeInit()
}
},
// 加载组件
load() {
this.show()
var flag = true // URL是否包含问号
if (this.$route.query.src.indexOf('?') === -1) {
flag = false
}
var list = []
for (var key in this.$route.query) {
if (key !== 'src' && key !== 'name') {
list.push(`${key}= this.$route.query[key]`)
}
}
list = list.join('&').toString()
if (flag) {
this.$route.query.src = `${this.$route.query.src}${
list.length > 0 ? `&list` : ''
}`
} else {
this.$route.query.src = `${this.$route.query.src}${
list.length > 0 ? `?list` : ''
}`
}
// 超时3s自动隐藏等待狂,加强用户体验
let time = 3
const timeFunc = setInterval(() => {
time--
if (time === 0) {
this.hide()
clearInterval(timeFunc)
}
}, 1000)
this.iframeInit()
},
// iframe窗口初始化
iframeInit() {
const iframe = this.$refs.iframe
const clientHeight = document.documentElement.clientHeight - 200
iframe.style.height = `${clientHeight}px`
if (iframe.attachEvent) {
iframe.attachEvent('onload', () => {
this.hide()
})
} else {
iframe.onload = () => {
this.hide()
}
}
},
getUrlPath: function() {
// 获取 iframe src 路径
let url = window.location.href
url = url.replace('/myiframe', '')
return url
}
}
}
</script> <style lang="scss">
.iframe {
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
box-sizing: border-box;
}
</style>

嵌套的页面——自适应高度与跨越操作DOM的更多相关文章

  1. RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...

  2. 解决div嵌套时IE8和FF无法自适应高度

    解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...

  3. iframe 自适应高度、父子页面传值、回调

    总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1.  ...

  4. iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...

  5. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  6. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  7. html之小积累-.-iframe自适应高度

    在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久. 方案1:当遇到if ...

  8. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  9. iframe跨域自适应高度

    思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...

随机推荐

  1. office激活方式,超简单

    只需要安装个小小的程序,亲测安全可靠 详情点击下方链接 https://blog.csdn.net/weixin_40941966/article/details/80872533

  2. C#登录SSH执行命令,下载文件

    前言 批量登录SSH执行命令 ,把应急响应中的日志文件下载回来. 代码实现 Renci.SshNet编译出DLL,引用. using System; using System.Collections. ...

  3. React16+配置打包目录

    在学习react的时候,肯定最终都要用脚手架,对比了手写配置webpack(比较费劲).generator-react-webpack(打不开官方文档……),最终还是选择了react官方的create ...

  4. Direct2D 学习笔记(3)图层 Layer

    利用图层Layer绘制资源网址:https://docs.microsoft.com/zh-cn/windows/win32/direct2d/direct2d-layers-overview   1 ...

  5. URL锚点HTML定位技术机制、应用与问题

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...

  6. 按CSS查询一个元素

    按CSS查询 示例1 查询一个 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 < ...

  7. TCP使用

    TCP使用注意事项总结   目录 发送或者接受数据过程中对端可能发生的情况汇总 本端TCP发送数据时对端进程已经崩溃 本端TCP发送数据时对端主机已经崩溃 本端TCP发送数据时对端主机已经关机 某个连 ...

  8. golang json解析到map中

    package main import ( "fmt" "encoding/json" ) type ItemMessage struct { ItemType ...

  9. java根据模板生成pdf

    原文链接:https://www.cnblogs.com/wangpeng00700/p/8418594.html 在网上看了一些Java生成pdf文件的,写的有点乱,有的不支持写入中文字体,有的不支 ...

  10. IOS IAP APP内支付 Java服务端代码

    IOS IAP APP内支付 Java服务端代码   场景:作为后台需要为app提供服务,在ios中,app内进行支付购买时需要进行二次验证. 基础:可以参考上一篇转载的博文In-App Purcha ...