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

　　在实际编码的过程中，大家一定有这种需求：在父级页面有一个<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. 本地构建：Gulp

    Gulp中文网:https://www.gulpjs.com.cn/ Gulp英文网:https://gulpjs.com/ Gulp:工作流程自动化+强化 (一)安装初始化 (二)基础API及插件 ...

  2. java基础 （一）之HashMap

    HashMap的存储结构是由数组和链表共同完成.Entry<K,V>[] ,Entry是单向链表. 1 HashMap数据结构 HashMap的底层主要是基于数组和链表来实现的,它之所以有 ...

  3. [原]编译flightGear

    参考:flightgear编译博客201705 flightGear是三维飞行仿真软件,这个款软件是开源的,我们尝试用其源码完整编译一遍这个工程,并使用它. 它用到里以下扩展库: 空气动力学库:JSB ...

  4. Symbol Vs String

    最重要区别 1 symbol存入内存后,始终存在,如果不进行垃圾收集,可能导致内存泄漏. String只会存在于某个创建它的作用域内.即有生命周期的. 2.唯一性. \\进入控制台 >" ...

  5. vs环境open读写创建

    vs环境openfd = open(save_as_file, O_RDWR|O_CREAT);//创建文件属性为只读fd = open(save_as_file, O_RDWR|O_CREAT, S ...

  6. hihocoder #1044 : 状态压缩·一 状压DP

    http://hihocoder.com/problemset/problem/1044 可以看出来每一位的选取只与前m位有关,我们把每个位置起始的前m位选取状态看出01序列,就可以作为一个数字来存储 ...

  7. vue 上拉加载自定义组件，超好用哦

    1.创建组件components > zj-roll > index.vue <template> <div> <slot></slot> ...

  8. Luffy之购物车页面搭建

    前面已经将一些课程加入购物车中,并保存到了后端的redis数据库中,此时做购物车页面时,我们需要将在前端向后端发送请求,用来获取数据数据 购物车页面 1.首先后端要将数据构建好,后端视图函数如下代码: ...

  9. ThinkPHP5.0源码学习之注册错误和异常处理机制

    在base.php文件中,用一句代码\think\Error::register();实现错误和异常处理机制的注册. // 注册错误和异常处理机制 \think\Error::register(); ...

  10. Solr安装使用教程

    一.安装 1.1 安装jdk solr是基于lucene而lucene是java写的,所以solr需要jdk----当前安装的solr-7.5需要jdk-1.8及以上版本,下载安装jdk并设置JAVA ...