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

　　在实际编码的过程中，大家一定有这种需求：在父级页面有一个<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. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  2. Bean的Scope

    Bean的scope: 1.Singleton(单例): 一个Spring容器只有以这个Bean实例. 2.prototype(多例): 每次调用新建一个Bean的实例. 3.request:一个ht ...

  3. jQuery对标签select优化：实现模糊搜索查询功能

    由于select标签中的option条数较多,翻页查询比较麻烦,需要对select标签进行优化,解决方法是通过增加模糊查询功能来提高用户体验感. 优化后的界面如下: 在实现这个优化的过程中,参考了两个 ...

  4. (01) 什么是Spring Boot

    1.Spring Boot 是spring家族的全新框架: Spring Boot 是简化spring 应用程序的创建和开发过程, 也就是说Spring Boot 能够简化之前采用ssh, ssm框架 ...

  5. python之模块定义、导入、优化详解

    一.模块 1.模块的定义 模块是一组包含了一组功能的python文件,比如test.py,模块名为test,可以通过import test进行调用.模块可以分为以下四个通用类别 1 使用python编 ...

  6. Nginx的使用（二）Nginx配置wordpress

    安装php:https://windows.php.net/download/,php默认启动命令:php-cgi.exe -b 127.0.0.1:9000 安装wordpress:https:// ...

  7. day17_python_1124

    01 昨日内容回顾 包: 1,在内存中创建一个以包命名的空间. 2,执行包的__init__文件将文件中的名字加载到包的名称空间. 3,通过包名.名字(变量,函数,类名)方式调用这些内容. aaa.x ...

  8. 用Nginx给网站做一个简单的防盗链

    目录结构 Nginx防盗链配置 有些时候,大家不想让别人调用自己的图片,一是因为个人版权的问题,再一点就是会增加服务器的负载.还会产生一些没必要的流量. 其实在Nginx里面,很容易就做到防盗链的,在 ...

  9. cocoa pods自己的笔记

    备注:这里只是个人的观点,有的地方也是copy,多多指教,个人笔记,有侵犯你们版权的地方还望海涵!!! 卡主不动 安装流程:http://www.tuicool.com/articles/qaMfuy ...

  10. nginx——限制上传文件的大小

    client_max_body_size 用于设置最大的允许客户端请求主体的大小,在请求首部中有 "Content-Length" ,如果超过了此配置项,客户端会收到 413 错误 ...