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. unsigned和signed

    int分为unsigned(无正负号)和signed(有正负号) 一般int默认为signed unsigned和unsigned int意思相同

  2. ueditor从word粘贴公式

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  3. faebdc的烦恼 莫队

    faebdc的烦恼 莫队 题面 思路 有点难想的莫队. 首先我们肯定要一个cnt[i]记录难度i出现的次数,但是我们发现每次删去一个难度后,如果那个难度的个数恰好是当前最多次数,我们就可能要更新一下答 ...

  4. Jetbrain全栈最新激活方法（2019年及之前所有新老版本）

    随着2019版的到来,之前的永久激活教程也不生效了,所以今天为大家带来一种新的永久激活方式. 1.下载新版破解补丁 破解补丁传送门提取码:3e8j 点击传送门下载补丁文件 jetbrains-agen ...

  5. 数据层面;MySQL查

    AND 运算优先于OR运算执行(通过括号进行强化) count(*) 会得到包含NULL的数据行数:count(<列明>)会得到NULL之外的数据行数 SQL语句的总逻辑:书写顺序 sel ...

  6. ElasticSearch java客户端更新时出现的错误：NoNodeAvailableException[None of the configured nodes are available

    下午尝试 用ElasticSearch  的java客户端去做数据检索工作,测试了一下批量更新,代码如下: public static void bulkUpdateGoods(List<Goo ...

  7. Java核心复习——J.U.C AbstractQueuedSynchronizer

    第一眼看到AbstractQueuedSynchronizer,通常都会有这几个问题. AbstractQueuedSynchronizer为什么要搞这么一个类? 这个类是干什么的.有什么用? 这个类 ...

  8. Keil综合（03）_map文件全解析[转]

    推荐分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来!http://www.captainbed.net/strongerhuang 我的网站:ht ...

  9. C# 多线程Thread.IsBackground=True的作用

    C#中多线程的线程加.IsBackground = true与不加有什么区别? 按照MSDN上讲:“获取或设置一个值,该值指示某个线程是否为后台线程.” 其实这个解释并不到位,至少应该解释一下后台线程 ...

  10. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...