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. P1608 路径统计

    题目描述 “RP餐厅”的员工素质就是不一般,在齐刷刷的算出同一个电话号码之后,就准备让HZH,TZY去送快餐了,他们将自己居住的城市画了一张地图,已知在他们的地图上,有N个地方,而且他们目前处在标注为 ...

  2. 【优化算法】变邻域搜索算法(VNS)求解TSP（附C++详细代码及注释）

    00 前言 上次变邻域搜索的推文发出来以后,看过的小伙伴纷纷叫好.小编大受鼓舞,连夜赶工,总算是完成了手头上的一份关于变邻域搜索算法解TSP问题的代码.今天,就在此给大家双手奉上啦,希望大家能ENJO ...

  3. 06_去除不需要的字段以及ELK时间轴问题

    去除字段只能去除_source中的,不是_source内的无法去除. 去除不必要的字段,不仅可以节省ES的存储内容,同时因为节省了ES的内容,可以加速搜索的速度 Logstash配置去除不需要的字段 ...

  4. fft，ntt总结

    一个套路:把式子推成卷积形式,然后用fft或ntt优化求解过程. fft的扩展性不强,不可以在fft函数里多加骚操作--DeepinC T1:多项式乘法 板子题 T2:快速傅立叶之二 另一个板子,小技 ...

  5. 【原创】go语言学习（十三）struct介绍2

    目录: 方法的定义 函数和方法的区别 值类型和指针类型 面向对象和继承 结构体和json序列化 方法的定义 1.和其他语言不一样,Go的方法采⽤用另外一种方式实现. package main impo ...

  6. html页面引入vue组件

    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发 ...

  7. 走进JavaWeb技术世界6：Tomcat5总体架构剖析

      本文以 Tomcat 5 为基础,也兼顾最新的 Tomcat 6 和 Tomcat 4.Tomcat 的基本设计思路和架构是具有一定连续性的. Tomcat 总体结构 Tomcat 的结构很复杂, ...

  8. jquery报变量没定义错误的原因

    该变量定义的范围:不在使用的方法中:

  9. java大型互联网项目大流量高并发所需的技术

    互联网一般运行技术:webservice,jquery,访问量,缓存,数据安全等,JAVA后台就比较多了,不过,像这种大型的互联网项目,基本框架都有了,你需要做的就是熟悉业务,熟悉他们公司所用的框架, ...

  10. Android 系统添加SELinux权限

    本文为博主原创文章,转载请注明出处:https://i.cnblogs.com/EditPosts.aspx?postid=11185476 CPU:RK3288 系统:Android 5.1 SEL ...