1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名
  2. window.parent.Func();  // 访问属性Func()是在父级窗口的方法

　　window可以不写

项目里用于上传文件功能使用了iframe，在引用iframe的页面里取父类元素或JS里的变量时候，需加上window.parent。

在index.JS定义的JS变量bootStrapFileUploadUrl = “上传的url”；在iframe里取的时候如下：

parent.bootStrapFileUploadUrl

给父类html里的img设置值，如下：

parent.document.getElementById("hotel_photo").

　　setAttribute("src",parent.window.bootStrapFileUploadUrl+"/upload/uploadHotel/"+response.statusMsg);

parent.closeUpFileDiv();//关闭图片上传组件

引用页面代码：

<%@ 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">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>酒店基本信息-->文件上传</title>

</head>

<body>

    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />

    <link href="${pageContext.request.contextPath }/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.1.1.min.js" ></script>

    <!-- bootstrap文件上传 js引用文件-->

    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath }/js/bsupload/fileinput.min.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath }/js/bsupload/es.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath }/js/bsupload/zh.js" type="text/javascript"></script>

        <input id="file-0a" name="file" class="file" type="file" multiple data-min-file-count="1"/>

        <script>

    $("#file-0a").fileinput({

        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],

        showUpload : true,

        showRemove : false,

        language : 'zh',

        allowedPreviewTypes : [ 'image' ],

        allowedFileTypes : [ 'image' ],

        maxFileCount : 1,

        maxFileSize : 2000,

        minImageWidth : 50, //图片的最小宽度

        minImageHeight : 50,//图片的最小高度

        maxImageWidth : 480,//图片的最大宽度

        maxImageHeight : 480//图片的最大高度

        ,uploadUrl :'../upfile/uploadHotelFile'

        //bstrapupload'

    });

    $('#file-0a').on('fileuploaded',function(event, data, previewId, index) {

        var form = data.form,

        files = data.files,

        extra = data.extra,

        response = data.response,

        reader = data.reader;

        parent.window.document.getElementById("hotel_photo").setAttribute("src",parent.window.bootStrapFileUploadUrl+"/upload/uploadHotel/"+ response.statusMsg);

        parent.window.closeUpFileDiv();//关闭图片上传组件

    });

</script>

</body>

</html>
第一种情况：iframe中不存在name和id的方法：（通过contentWindow获取）
var iframe = document.getElementsByTagName('iframe')[0];
var ifr_document = iframe.contentWindow.document;//iframe中的文档内容
或者：
var _iframe = document.getElementByIdx_x('iframeId').contentWindow;

var _div =_iframe.document.getElementByIdx_x('objId');  
或者：
  1. var frameWin=document.getElementById('iframe').contentWindow;    //window对象
  2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document对象
  3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body对
第二种情况：iframe中存在name或者id的方法：（通过frames[]数组获取）
document.frames['iframe的name'].document.getElementById('元素的ID');
第三种情况：在iframe中获取父级页面的id元素 ：
var obj=window.parent.document.getElementById('objId') ；
$(window.parent.document).find("#objId").css('height':'height);   // window可省略不写 jquery
 
第四种情况：父级窗体访问iframe中的属性
  1. a、 用contentWindow方法
  2. document.getElementById('iframe1').onload=function(){
  3. this.contentWindow.run();
  4. }
  5. b、用iframes[]框架集数组方法
  6. document.getElementById('iframe1').onload=function(){
  7. frames["iframe1"].run();
  8. }
第五种情况：在iframe中访问父级窗体的方法和属性 //window 可以不写
  1. window.parent.attributeName;  // 访问属性attributeName是在父级窗口的属性名
  2. window.parent.Func();  // 访问属性Func()是在父级窗口的方法
 
第五种情况：让iframe自适应高度
    1. $('#iframeId').load(function() { //方法1
    2. var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);
    3. var h=$(this).contents().height();
    4. $(this).height(h+'px');
    5. });
    6. $('#iframeId').load(function() { //方法2
    7. var iframeHeight=$(this).contents().height();
    8. $(this).height(iframeHeight+'px');
    9. });

iframe里访问父级里的方法属性的更多相关文章

  1. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  2. Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

    使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...

  3. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  4. ng-repeat 嵌套访问父作用域里的属性

    在一个项目中,需要嵌套循环输出一个二维表的里的数据 数据结构 [ { id:1, list:[ { id:1, name:'li' } ] }, { id:2, list:[ { id:1, name ...

  5. [ActionScript 3.0] flash如何访问父级或者舞台上的变量、函数等的方法

    方法一: 进行类型转换,先将root.parent强制转换为MovieClip类型,再进行使用,如下:MovieClip(root).i.MovieClip(this.parent).i.MovieC ...

  6. 解决iframe重定向让父级页面跳转

    原文:http://www.jb51.net/article/40583.htm 有内嵌iframe的页面,当session过期时,点击连接重定向后的跳转会在iframe中跳转,在登录页面中加入下面的 ...

  7. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

  8. Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  9. 子iframe 怎么调用 父级的JS函数

    window.parent.父级函数名();

随机推荐

  1. 从设计稿到实现React应用（分类数据处理）

    1. 确定设计稿和数据 设计稿: 数据: [ {category: "Sporting Goods", price: "$49.99", stocked: tr ...

  2. Greenplum table 之 appendonly的列存储表

    一.appendonly的列存储表 1.创建列存储表 create table test_column_ao( id bigint, name varchar(128), value varchar( ...

  3. 2-set奶牛议会

    Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以“每头牛 都可以获得自己想要的”为原则,建立了下面的投票系统: M只到场的奶牛 (1 & ...

  4. 【テンプレート】字符串hash

    不懂hash是什么的盆友给出直通车:滴滴滴,开车啦~ 如果你看懂了的话: hash模板来也~ #include <cstdio> #include <string> #incl ...

  5. CSPS分数取mod赛92-93

    我好菜啊..... 92只会打暴力,93暴力都不会了 模拟92, T1:直接ex_gcd加分类讨论即可 T2:考场只会打暴搜,正解为排序后线段树解决,排序的关键字为a+b,因为如果ai<bj&a ...

  6. YII框架的类自动加载机制

    YII之所以能实现快速的自动加载类文件,是因为它通过两种途径来实现. 先看文件 vendor\yiisoft\yii2\BaseYii.php 里面的 autoload 方法 public stati ...

  7. 10月清北学堂培训 Day 1

    今天是杨溢鑫老师的讲授~ T1 1 题意: n * m 的地图,有 4 种不同的地形(包括空地),6 种不同的指令,求从起点及初始的状态开始根据指令行动的结果. 2 思路:(虽然分了数据范围但是实际上 ...

  8. Java学习日记基础篇（四）——类，对象之成员变量，成员方法，构造方法

    面向对象(Object Oriented) 一.面向对象杂谈 面向对象(Object Oriented),我的翻译是以物体为目标的,就是说编程的时候是建立一个物体,然后对这个物体进行操作. Java语 ...

  9. JS JQuery 操作: Json转 Excel 下载文件

    方法的调用 var json = '[' + '{"申请流水号":"123456","保险公司":"测试数据",&quo ...

  10. 区间最值问题（RMQ）

    题目描述 给出N个数,求第a个数到第b个数之间最大的数减去最小的数的结果 程序输入说明 N(N小于100,000),M(M小于100,000)接下来有N个数接下来M组范围,所有数均在[0,231-1] ...