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. 关于java中的值传递和引用传递(也就是地址传递)

    概念解释: 值传递,传递值,在函数中形参发生的变化不影响实参. 引用传递,传递对象引用,在函数中形参发生的变化影响实参. ======================================= ...

  2. [HNOI2002]营业额统计 II

    https://www.luogu.org/problemnew/show/2234 将权值离散化,以权值为下标建立权值线段树 #include <bits/stdc++.h> using ...

  3. faebdc的烦恼 莫队

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

  4. (RE) luogu P3690 【模板】Link Cut Tree

    二次联通门 : luogu P3690 [模板]Link Cut Tree 莫名RE第8个点....如果有dalao帮忙查错的话万分感激 #include <cstdio> #includ ...

  5. TensorFlow(十六)：TensorFlow GPU准备

    一:安装cuda 下载地址 二:安装cuDNN 三:安装GPU版TensorFlow 注意:gpu版的TensorFlow打开tensorboard要使用:tensorboard --logdir C ...

  6. grafana 的配置文件,和使用mysql数据库做持久化

    grafana 配置文件 vim /etc/grafana/grafana.ini 下面有些参数在新版中6.x版本中已经过时,请参考下面官网最新帮助文档为准 https://grafana.com/d ...

  7. Vuex学习心得

    最近公司项目中使用Vuex做状态管理,就全面温习了一遍文档,然后在项目使用中遇到一些常见问题就一一总结下. 一.由来 我们知道Vue中数据是自顶向下单向流动的,但是以下两种情况单向数据流实现起来十分繁 ...

  8. 配置centos7阿里镜像源和epel源

    [root@runstone yum.repos.d]# pwd /etc/yum.repos.d [root@runstone yum.repos.d]# cat aliBase.repo #镜像源 ...

  9. docker笔记--容器之间如何互相免密？

    在使用docker搭建hadoop分布式集群的时候,需要各容器之间相互免密登录,传统的方式我想或许会很麻烦,特别是当容器达到几百上千台的时候,这时就需要有一种方式来更简单实现免密登录了. 环境介绍: ...

  10. 配置 Ubuntu 服务器

    Python: apt install python3-pip sudo add-apt-repository ppa:fkrull/deadsnakes sudo apt-get update ap ...