您的位置：首页 > 其它

iframe 自适应高度及元素获取

2016-09-01 00:00 78 查看

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框架中使用父窗口的元素。

js

在父窗口中获取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();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

iframe 自适应高度 及 元素获取

iframe自适应高度

js/jquery 获取iframe中元素

iframe 自适应高度及元素获取