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

　　在实际编码的过程中，大家一定有这种需求：在父级页面有一个<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. Visual Studio 实用扩展工具

    Indent Guides 为每个缩进绘制一条虚线: Highlight all occurrences of selected word 高亮相关代码: Productivity Power Too ...

  2. 雷林鹏分享：jQuery EasyUI 数据网格 - 扩展编辑器

    jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...

  3. pipenv使用总结

    一.pipenv默认虚拟环境路径在用户目录下的.\virtualenvs下,不同虚拟环境目录不同,如果要更改为在当前项目根目录下,可以在项目根目录下手动创建.venv目录. 1.linux环境下设置环 ...

  4. Mac+Apache+PHP 安装 Xdebug 方法

    MAC homebrew自2018/3/31之后弃用homebrew/php By 31st March we will deprecate and archive the Homebrew/php ...

  5. 关于window 图片系统功能

    直接选择文件悬浮  分辨率 大小 修改时间 文件选择较少的 可以选择反选  找到自己想要的 大小排序 找到最大的压缩  名称排序 同一类的图片  按时间排序找自己刚修改的图片 文档类预览

  6. liunx 安装mysql数据库

      yum 安装rz/sz yum install -y lrzsz 卸载Mariadb数据库 查询所安装的MariaDB组件: [root@localhost logs]# rpm -qa | gr ...

  7. VS遇到的问题记录

    Q:id为xxxx的进程当前未运行 A:将端口改掉.

  8. linux 执行脚本1.补充命令 2.后台执行

    nohup是永久执行&是指在后台运行2>&1 是将标准出错重定向到标准输出,这里的标准输出已经重定向到了out.file文件,即将标准出错也输出到out.file文件中.最后一个 ...

  9. css.1

    background-repeat背景平铺background-x水平平铺 background-y垂直平铺 background:url()no-repeat;不平铺 background-size ...

  10. Alpha冲刺10

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10045588.html 作业博客:https://edu.cnblogs.com/campus ...