实现功能：在子页面操作父页面元素。

　　在实际编码的过程中，大家一定有这种需求：在父级页面有一个<iframe scrolling='auto'></iframe>内联框架，而我们需要在iframe的子页面里对父页面的元素进行操作。下面我就实际代码展示一下。

父级页面

<div id="fatherHtml">

    <div id="button1"><h2>这是父级页面</h2></div>

    <iframe scrolling='auto'></iframe>

</div

子级页面

<html>

<head></head>

<body>

<div>

     <div>这是子页面</div>

     <button id="clickButton">点击我</button>

</div>

</body>

</html>

<script>

$(function(){

    window.parent.$("#button1").click(function(){//window.parent.$("#button1")就获取到了父级页面的div元素

        $.ajax({

            url : '<%=serverIp%>/webcons.do?method=cancellationAccountBiocuration',

            type: "get",

            dataType:"json",

            success:function(data) {

                window.parent.$("body").css("overflow","scroll");

                window.parent.$("#mask").remove();

                window.parent.$("#middleDiv").remove();

            }

        })

    })

})

</script>

 iframe参数说明

　　src ：  src 属性规定嵌入在 <iframe> 中的文档的地址。

　　　　       语法 ：<iframe src="URL">

　　　　　　URL可能的值：

　　　　　　   1、绝对 URL - 指向另一个网站（比如 src="http://www.example.com/default.htm"）；

　　　　　　   2、相对 URL - 指向网站中的一个文件（比如 src="default.htm"）

　　frameborder：规定是否显示 <iframe> 周围的边框。

　　　　　　　　   可能的值：

　　　　　　　　　　1  ：默认，开启边框；

　　　　　　　　　　2：关闭边框

　　scrolling ：规定是否在 <iframe> 中显示滚动条。默认地，如果内容超出了 <iframe>，滚动条就会出现在 <iframe> 中。

　　　　　　语法：<iframe scrolling="auto|yes|no">

　　　　　　可能的值：

　　　　　　　　auto:在需要的情况下出现滚动条（默认值）。

　　　　　　　　yes:始终显示滚动条（即使不需要）。

　　　　　　　　no:从不显示滚动条（即使需要）。

 window.parent 说明

　　功能：返回父窗口。

　　语法：window.parent

　　注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。

　　在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。

　　示例：

　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<head>

<script>

function openWin(){

    window.open('','','width=200,height=100');

    alert(window.parent.location);

}

</script>

</head>

<body>

<input type="button" value="打开窗口" onclick="openWin()">

</body>

</html>

　　示例效果：

 

在子页面操作父页面元素和iframe说明的更多相关文章

  1. JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.v ...

  2. iframe子页面操作父页面并实现屏蔽页面弹出层效果

  3. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  4. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  5. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  6. jQuery子页面获取父页面元素

    $("input[type='checkbox']:checked",window.opener.document);//适用于打开窗口的父页面元素获取 $("input ...

  7. iframe子页面获取父页面元素的方法

    在iframe子页面获取父页面元素 代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素 代码如下: $("#objid" ...

  8. AppBox v6.0中实现子页面和父页面的复杂交互

    前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...

  9. jquery读取iframe子页面和父页面的处理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

随机推荐

  1. Spring NoSuchBeanDefinitionException六大原因总结

    1. Overview In this article, we are discussing the Springorg.springframework.beans.factory.NoSuchBea ...

  2. _pet

    可以控制各职业召唤物的属性.用于增强BB `comment` 备注 `classIndex` 职业序号 `DmgAddPct` 宠物伤害倍率 `SpAddPct` 法术伤害 `HpAddPct`血量倍 ...

  3. chrome 调试功能使用说明

    单文件搜索 ctrl+f 全局搜索 ctrl+shift+f

  4. Windows下安装python的scipy等科学计算包（转）

    如果要使用python进行科学计算.数据分析等,一定要安装scipy.seaborn.numpy等等包. 但Windows下安装python的第三方库经常会出现问题.此前,已介绍过Windows下如何 ...

  5. 微信支付---H5支付

    这里说的H5支付是指在微信外的浏览器打开H5商家的支付,切勿与公众号微信内支付混淆, 1.H5支付的开通流程 登陆微信商户平台页面:https://pay.weixin.qq.com/wiki/doc ...

  6. kafka producer 发送消息简介

    kafka 的 topic 由 partition 组成,producer 会根据 key,选择一个 partition 发送消息,而 partition 有多个副本,副本有 leader 和 fol ...

  7. erlang大法好

    可惜haxe不能生成erlang.不过没关系,s6k输入法的实际执行方案,现在由typescript改用haxe.cdt3的ts地位不变. 以后这个博客大部分内容都是跟haxe/typescript相 ...

  8. 【转载】Oracle 中count(1) 、count(*) 和count(列名) 函数的区别

    1)count(1)与count(*)比较: 1.如果你的数据表没有主键,那么count(1)比count(*)快2.如果有主键的话,那主键(联合主键)作为count的条件也比count(*)要快3. ...

  9. OSI七层模型与TCP/IP五层模型（转）

    reference:https://www.cnblogs.com/qishui/p/5428938.html         博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能 ...

  10. 第九节 java7JDK的常用封装类型

    一.Java Scanner类 /初始化一个 scanner 对象. Scanner scanner = new Scanner(System.in); //判断语法 boolean b = scan ...