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. 二十.Nginx反向代理、Nginx的TCP/UDP调度器、Nginx常见问题处理

    proxy client web1 web2 1.nginx反向代理   使用Nginx实现Web反向代理功能,实现如下功能:   后端Web服务器两台(web1 192.168.2.100 web2 ...

  2. 【HTTP】协议详解

    什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端 ...

  3. RS-232串口通信简介

    1969年,美国电子工业协会将RS-232定为串行通信接口的电器标准,该标准定义了数据终端设备DTE(Date Teriminal Equipment)与数据通信设备DCE(Data Communic ...

  4. 5、创建RDD（集合、本地文件、HDFS文件）

    一.创建RDD 1.创建RDD 进行Spark核心编程时,首先要做的第一件事,就是创建一个初始的RDD.该RDD中,通常就代表和包含了Spark应用程序的输入源数据.然后在创建了初始的RDD之后,才可 ...

  5. IP数据报首部checksum的计算

    IP数据报首部checksum的计算 2009年02月22日 23:23:00 zhangyang0402 阅读数:10897   一.首先区别下面两个概念:(1)one's complement:正 ...

  6. mysql中 where与having的区别

    having子句与where有相似之处但也有区别,都是设定条件的语句.在查询过程中聚合语句(sum,min,max,avg,count)要比having子句优先执行.而where子句在查询过程中执行优 ...

  7. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  8. 说出Servlet的生命周期，并说出Servlet和CGI的区别。

    说出Servlet的生命周期,并说出Servlet和CGI的区别. 山治ZHrx5 | 浏览 1377 次 推荐于2016-09-16 22:39:19 最佳答案 Servlet的生命周期分为5个阶段 ...

  9. Homebrew 使用国内镜像

    在国内的网络环境下使用 Homebrew 安装软件的过程中,可能会长时间卡在 Updating Homebrew ... 方法一:按command + c 取消本次更新操作,直接安装软件 方法二:设置 ...

  10. ResultMap和ResultType在使用中的区别、MyBatis中Mapper的返回值类型

    在使用mybatis进行数据库连接操作时对于SQL语句返回结果的处理通常有两种方式,一种就是resultType另一种就是resultMap,下面说下我对这两者的认识和理解 resultType:当使 ...