嵌套的页面——自适应高度与跨越操作DOM
<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的更多相关文章
- RecyclerFullyManagerDemo【ScrollView里嵌套Recycleview的自适应高度功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对于Recyclerview自己的LinearLayoutManager和GridLayoutManager,在版本23.2.0之后 ...
- 解决div嵌套时IE8和FF无法自适应高度
解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为h ...
- iframe 自适应高度、父子页面传值、回调
总结一下最近用iframe遇到的问题与解决办法: 结构:主页面main.html,里面套用iframe.iframe不能出现滚动条,自适应子页面高度.内容多了滚动条是main.html页面的. 1. ...
- iframe内容自适应高度
一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...
- iframe之间通信问题及iframe自适应高度问题
下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...
- 【转】jquery iframe取得元素与自适应高度
今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...
- html之小积累-.-iframe自适应高度
在做系统框架的时候,常常会用到iframe,当需求是iframe不能出现纵向滚动条,需要根据加载页面的高度,一致延伸,但是iframe的高度自适应问题比较麻烦,当时也是纠结了好久. 方案1:当遇到if ...
- 网页制作技巧:iframe自适应高度
转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...
- iframe跨域自适应高度
思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...
随机推荐
- 使用Async-profiler 对程序性能优化实战
原文在简书上, https://www.jianshu.com/p/f8336b835978 1.背景 目前有一个kafka消费者工程,此工程会消费kafka中的消息,并通过fastjson解析该消息 ...
- 将任意音频格式文件转换成16K采样率16bit的wav文件
此转换需要使用ffmpeg 假设有目录 d:\录音 目录有 张三.m4a, 李四.m4a xxx.m4a(其他任意格式音频触类旁通可以把 *.m4a改成*.*).批量转换成采样率16K,有符号,16b ...
- React中如何实现模态框每次打开都是初始界面
问题描述如下 解决方案:每次点击打开模态框的时候为,当前模态框设置一个独立的key值,代码如下: /* * 上传文件的模块框控制 * */ showFileModal = () => { thi ...
- 第二十三章 多项目集中权限管理及分布式会话——《跟我学Shiro》
二十三章 多项目集中权限管理及分布式会话——<跟我学Shiro> 博客分类: 跟我学Shiro 跟我学Shiro 目录贴:跟我学Shiro目录贴 在做一些企业内部项目时或一些互联网后台时 ...
- IPVS支持的调度算法
对于后端的RS集群,LB是如何决策应该把消息调度到哪个RS节点呢?这是由负载均衡调度算法决定的.IPVS常用的调度算法有: 轮询(Round Robin) LB认为集群内每台RS都是相同的,会轮流进行 ...
- selenium UI自动化解决验证码的五种方法
TesseractPy3.py #coding=utf-8 import os import subprocess import traceback import logging from PIL i ...
- Egret入门学习日记 --- 第十五篇(书中 6.1~6.9节 内容)
第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...
- 云计算第一章:服务器硬件及linux初体验
第一章:服务器硬件及linux初体验 一.了解linux: 1.linux的三大分支:debian.redhat.ubuntu 2.redhat版本: redhat:红帽,简称RHEL,企业级官方版本 ...
- Python爬取链家二手房源信息
爬取链家网站二手房房源信息,第一次做,仅供参考,要用scrapy. import scrapy,pypinyin,requests import bs4 from ..items import L ...
- 二十四 java 多线程一些知识点
1:blocked线程和waiting的线程的区别? 如何唤醒? java线程中含有waiting与blocked两种状态: 线程的 blocked状态往往是无法进入同步方法/代码块来完成的(BLOC ...