iframe弹出框全屏显示手机上如何取消全屏

来源：蜘蛛抓取(WebSpider) 时间：2017-09-15 15:29 标签： iframe 全屏
随笔 - 33&
文章 - 0&评论 - 1&trackbacks - 0
componentDidMount(){var elem = document.getElementById('iframe');;
var elem = document.getElementById("iframe");
requestFullScreen(elem);
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullS
console.log(requestMethod);
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
&iframe设置属性 &allowfullscreen="true" & &
var React = require('react');import {Button} from 'antd';var Iframe = React.createClass({
getInitialState(){
requestFullScreen:function(){var element = document.getElementById("iframe");
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullS
console.log(requestMethod);
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
var pathname= this.props.location.
console.log(pathname);
var src='';
if(pathname=='relationalDatabase'||pathname=="/relationalDatabase"){
src='http://10.248.26.205:8080/login.htm';
}else if(pathname=='zeppelin'||pathname=='/zeppelin'){
src='http://10.248.26.210:8080/#/';
}else if(pathname=='jupyter'||pathname=='/jupyter'){
src='http://10.248.26.207:8080/';
}else if(pathname=='rstudio'||pathname=='/rstudio'){
src='http://10.248.26.206:8080/';
}else if(pathname=='serviceInterface'||pathname=='/serviceInterface'){
src='http://10.248.26.212:8090/swagger-ui.html';
}else if(pathname=='messageMonitoring'||pathname=='/messageMonitoring'){
src='http://10.248.26.208:8083/';
}else if(pathname=='configurationManagement'||pathname=='/configurationManagement'){
src='http://10.248.26.205:3000/datasource';
} else if(pathname=='interactiveQuery'||pathname=='/interactiveQuery'){
src='http://10.248.26.204:8888/';
}else if(pathname=='componentMonitoring'||pathname=='/componentMonitoring'){
src='http://10.246.152.122:8080/';
}else if(pathname=='schedulingManagement'||pathname=='/schedulingManagement'){
src='http://10.248.26.204:11000/oozie/';
}else if(pathname=='serviceManagement'||pathname=='/serviceManagement'){
src='http://10.248.27.45:8080/dubbo-admin-2.8.4a/';
}else if(pathname=='zabbix'||pathname=='/zabbix'){
src='http://10.248.26.211/zabbix/index.php?enter=Sign in&name=Admin&password=zabbix';
}else if(pathname=='dataAcquisition'||pathname=='/dataAcquisition'){
src='http://10.248.26.204:8888/sqoop';
&iframe id="iframe"
scrolling="yes" style={{padding: 0, margin: 0, borderRadius: '5px',position:'absolute',left:'0px',top:'0px'}} width='100%' height='900px' frameBorder="0"
src={src} & &/iframe&&Button id='fullScreen' type="primary" onClick={this.requestFullScreen}&Primary&/Button&
});module.exports = I
阅读(...) 评论()> 博客详情
在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用：
单个iframe 高度自适应：
&iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"&&/iframe&
起作用的是这句：onload="this.height=iFrame1.document.body.scrollHeight"
多层嵌套iframe 高度自适应：A页面的iframe：&iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" &&/iframe&
B.php页面又有一个iframe：&iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHparent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" &&/iframe&
起作用的代码是这句：onload="this.height=rightform.document.body.scrollHparent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"
onload的时候执行了两条js语句：
1、设置当前iframe自己的高度自适应this.height=rightform.document.body.scrollHeight&&
2、设置父iframe的高度自适应（注意后面的高度单位px，如果不加单位，firefox下不起作用）parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'
以上代码在ie6、ie7、ie8、firefox3.5下测试通过
人打赏支持
码字总数 2892
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥

我要回帖

更多关于 iframe 全屏 的文章

 

随机推荐