iframe 自适应高度及元素获取

最新推荐文章于 2022-01-09 15:22:28 发布

weixin_34233618

最新推荐文章于 2022-01-09 15:22:28 发布

阅读量49

点赞数

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/maoguangdong/blog/740991

版权

2019独角兽企业重金招聘Python工程师标准>>>

iframe自适应高度

html代码如下

<iframe style="display: none;" name ="ifr_unitList" id="ifr_unitList" frameborder="0" width="100%"   scrolling="no" onload="changeFrameHeight()"></iframe>

父窗口jsp 文件添加事件(主要是在父页面中获取iframe 页面高度再复制给父页面中的iframe height)：

function changeFrameHeight(){
    var ifm= document.getElementById("ifr_unitList"); 
    var obj =window.frames["ifr_unitList"].document.getElementById("unitList").clientHeight;
    ifm.height=window.frames["ifr_unitList"].document.getElementById("unitList").clientHeight+window.frames["ifr_unitList"].document.getElementById("xfhxon").clientHeight;//获取 iframe jsp 文件加载的事件高度，再加载到父页面的iframe 高度上
    
}

window.onresize=function(){  //窗口大小改变
     changeFrameHeight();  

}

iframe jsp:

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link href="<c:url value="/skins/css/ysw.css" />" rel="stylesheet" type="text/css" />
<c:url value="/" var="root"></c:url>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<div class="wrap" id="unitList" style="height: 185px;">
...
</div>
<div class="xf_hxon" id="xfhxon">
...
</div>

js/jquery 获取iframe中元素

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素。

在父窗口中获取iframe中的元素

Js代码收藏代码

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();  
实例：window.frames["ifm"].document.getElementById("btnOk").click();

Java代码收藏代码

格式：  
var obj=document.getElementById("iframe的name").contentWindow;  
var ifmObj=obj.document.getElementById("iframe中控件的ID");  
ifmObj.click();  
实例：  
var obj=document.getElementById("ifm").contentWindow;  
var ifmObj=obj.document.getElementById("btnOk");  
ifmObj.click();

在iframe中获取父窗口的元素 Js代码收藏代码

格式：window.parent.document.getElementById("父窗口的元素ID").click();  
实例：window.parent.document.getElementById("btnOk").click();

jquery

在父窗口中获取iframe中的元素

Js代码收藏代码

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1  
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

Js代码收藏代码

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2  
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素 Js代码收藏代码

格式：$('#父窗口中的元素ID', parent.document).click();  
实例：$('#btnOk', parent.document).click();

转载于:https://my.oschina.net/maoguangdong/blog/740991

weixin_34233618

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe 自适应高度及元素获取

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

iframe 自适应高度 及 元素获取

iframe自适应高度

js/jquery 获取iframe中元素

iframe 自适应高度及元素获取