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

　　在实际编码的过程中，大家一定有这种需求：在父级页面有一个<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. 继承ActionSupper类报错 --Struts2

    如下图所示,继承ActionSupper类报错: 原因:缺少Struts2中JAR包,具体是:

  2. Police Stations CodeForces - 796D (bfs)

    大意: 给定树, 有k个黑点, 初始满足条件:所有点到最近黑点距离不超过d, 求最多删除多少条边后, 使得原图仍满足条件. 所有黑点开始bfs, 贪心删边. #include <iostream ...

  3. 『TensorFlow』张量尺寸获取

    tf.shape(a)和a.get_shape()比较 相同点:都可以得到tensor a的尺寸 不同点:tf.shape()中a 数据的类型可以是tensor, list, array a.get_ ...

  4. HTML5 FormData方法介绍

    详细见链接 转载说明:转自CSDN上“诗渊”的博客

  5. Mysql按周，按月，按日，按小时分组统计数据

    按周   select DATE_FORMAT(create_time,'%Y%u') weeks,count(caseid) count from tc_case group by weeks;   ...

  6. 在 .NET项目中使用 Redis（2018.10.16）

    1. 打开NuGet管理器搜索redis,安装:“StackExchange.Redis” 2. 配置 Web.config 文件 <connectionStrings> <add ...

  7. 服务调用restful或feign负载均衡ribbon

  8. javascript 位操作符

    not: 按位非,符号为波浪线~ 作用吧二进制数的所有位进行非操作,对应的十进制结果为原先10进制数字取负值然后减去1 其他的操作符感觉不是很常用,分别为按位与(&),按位或(|),左移(&l ...

  9. Wampserver 403问题

    使用Wampserver   2.4.23做反向代理时报403没有权限:是因为在升级到2.4之后的版本只修改httpd.conf文件不管用 正确步骤如下:1.修改httpd.conf 文件中的Requ ...

  10. ubuntu 16.04 编译安装 trl8291cu系列 无线网卡驱动

    1 先 下载git包 和相关编译工具 sudo apt-get update sudo apt-get install git linux-headers-generic build-essentia ...