jquery 实践操作：iframe 相关操作

此篇记录关于HTML 的 iframe 元素 的相关记录

定义：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

常用的基本 iframe 设置（详细设置属性参考API：http://www.w3school.com.cn/tags/tag_iframe.asp）：

<iframe id="alarmStateTabIframe" scrolling="no" src=""></iframe>

关于 iframe 的相关操作：

iframe 父页面获取&操作子页面元素（使用 iframe id 属性调用）

示例：
父页面：parentPage.html 文件，里面含有一个 iframe<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面首页</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <div id='parDiv'>父页面</div>

    <iframe src="childPage.html" id="youyou" height="" width=""></iframe>  <!-- 包含的 iframe -->

    <script>

        <!-- 父页面调用子页面 测试： 使用 id 属性调用 -->

        window.onload = function(){

            document.getElementById('youyou').contentWindow.document.getElementById('test').style.color = '#ff1e19';

            //  等价于jquery:  $("#youyou").contents().find("#test").css('color','red');

        };

    </script>

</body>

</html>

子页面：childPage.html 文件，里面含有一个 iframe

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子页面</title>

</head>

<body>

    <div id="test">我是iframe测试的子页面</div>

</body>

</html>

运行父页面，会看到父页面的iframe部分写入了子页面文字!!

总结：

1. 父页面中 JS 获取/更改iframe子页面内容:

  JS 获取: $(document.getElementById('youyou').contentWindow.document.body).html() //eg: $(document.getElementById('youyou').contentWindow.document.body).html("<h6>gusgu</h6><div id='test'> ghyauati</div>")
  jquery 获取：$("#youyou",$('#test').document); //$("#youyou",parent.document.body).attr("src","http://www.baidu.com"); 替换子页面原来的所有内容

2. 父页面中 JS 操作iframe子页面的某个元素: 
  JS 获取: document.getElementById('youyou').contentWindow.document.getElementById('test').style.color='red'
  jquery 获取：格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
             实例: $("#youyou").contents().find("#test").css('color','red');  //eg: $("#theiframe").contents().find("#flag").html()

其他操作（未测）：
jquery 父、子页面之间页面元素的获取，方法的调用：

1. 父页面获取子页面元素：
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id
2. 父页面调用子页面方法：
格式：$("#iframe的ID")[0].contentWindow.iframe方法();
实例：$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法
3. 子页面获取父页面元素：
格式：$("#父页面元素id" , parent.document);
实例：$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id

3. 在父窗口中操作 选中 iframe 中的所有单选钮
  $(window.frames["iframe1"].document).find("input:radio").attr("checked","true");
4. 在IFRAME中操作 选中父窗口中的所有单选钮
  $(window.parent.document).find("input:radio").attr("checked","true");
5. 父窗口想获得IFrame中的Iframe，就再加一个frames子级就行了，如：
  $(window.frames["iframe1"].frames["iframe2"].document).find("input:radio").attr("checked","true");

父页面里的 iframe 中的某个元素获取

iframe 父页面获取&操作子页面元素（使用 iframe name 属性调用）

示例：

父页面：parentPage.html，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面首页</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <iframe name="iframe1" src="childPage.html"></iframe>

    <script>

        window.onload =function () {

            $(window.frames["iframe1"].document).on("click","#btn",function(){  //window.frames["iframe1"].document获的iframe标签嵌套页面document对象

                $(this).html("");

            })

        }

    </script>

</body>

</html>

子页面：childPage.html，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子页面</title>

</head>

<body>

    <button id="btn">测试操作</button>

</body>

</html>

运行父页面，点击按钮会看到按钮上文字变化!!

子页面操作获取&操作父页面元素：

参考： http://www.jb51.net/article/43406.htm

父页面写好div+iframe, 子页面中 JS 调用相应的元素，方法等

父页面：parentPage.html, 书写页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面首页</title>

</head>

<body>

    <form id="form1"></form>

    <div>

        <div id="default" style="width: 100px; height: 100px; float: left;">default 里的卡卡</div>

        <iframe id="iframeid" src="childPage.html" style=" width:400px; height:400px; float:left;"></iframe>

    </div>

    <script>

        var h = "hello";

        function getHelloWo() {

            alert("welcome to the world");

        }

    </script>

</body>

</html>

子页面： childPage.html操作父页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子页面</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <script>

        $(function () {

            //在iframe中查找父页面元素

            alert($("#default", window.parent.document).html());

            //在iframe中调用父页面中定义的方法

            parent.getHelloWo();

            //在iframe中调用父页面中定义的变量

            alert(parent.h);

        })

    </script>

</body>

</html>

运行 父页面 parentPage.html 看看效果，会不断弹出窗口；

总结：

原生 js 父页面元素的获取，方法的调用：

. 子页面调用父页面方法：

    格式：parent.父页面方法

    实例：parent.pClick(); // pClick 为父页面 js 方法

. 子页面获取父页面元素：

    格式：window.parent.document.getElementById("父窗口元素ID");

    实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id

再示例：子页面追加/更改元素：

父页面：parentPage.html 至少包含一个 iframe

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>父级页面</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <div id="example">这是父级页面！</div>

    <iframe name="iframe1" src="childPage.html"></iframe>

</body>

</html>

子页面：childPage.html, 操作父页面中元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子页面</title>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

    <script language="javascript">

        $("body",parent.document).append('<br>这是子级页面追加的内容！');  //子页面给父页面追加内容

        $("body",parent.document).find('#example').html('子级页面将替换父级页面的内容！');  //子页面改变父页面某个元素内容

    </script>

</body>

</html>

运行父页面 parentPage.html ，可以看到父页面内容的变化；

jquery 实践操作：iframe 相关操作的更多相关文章

jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容示例描述: ...
iframe相关操作
内容摘要父级获取iframe中的元素父级触发iframe中的函数 iframe触发父级元素绑定的事件 iframe触发父级函数方法 iframe触发父级元素的值 parent.html <! ...
javascript iframe相关操作
1. 获得iframe的window对象 iframeElement.contentWindow 2. 获得iframe的document对象存在跨域访问限制. chrome:iframeEleme ...
jQuery学习笔记--JqGrid相关操作方法列表（上）
1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridi ...
linux网络操作防火墙相关操作
防火墙状态查询防火墙状态 service iptables status 停止防火墙 service iptables stop 启动防火墙 service iptables start 重启防火墙 ...
iframe的操作
获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...
原生js与jquery操作iframe
1 原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...
Jquery 操作IFrame
使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id ...
jquery 操作iframe的几种方法总结
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...

随机推荐

【6.20校内test】
反正考的不是很好吧,赶脚炸了啊qwq 然后这两天一直在忙一些神奇的事情,所以没有整理完手动@water_lift T1:大美江湖: [题目背景] 细雪飘落长街,枫叶红透又一年不只为故友流连,其实我 ...
JT∕T 905 -2014 出租汽车服务管理信息系统的相关协议研究
出租汽车服务管理信息系统(JT∕T 905 -2014) 国家的相关技术要求2014年7月正式出台,总体有四部分, 第 1 部分:总体技术要求: 第 2 部分:运营专用设备: 第 3 部分 ...
grep过滤目录或文件方法
在使用grep在指定目录下查找包含指定字符串的文件是,我们想过滤(即不递归查询指定目录)时!可以使用 –exclude-dir 参数单个目录实例搜索.目录但不搜索在.目录下的.svg目录中包含&q ...
ZR#317.【18 提高 2】A(计算几何二分)
题意 Sol 非常好的一道题,幸亏这场比赛我没打,不然我估计要死在这个题上qwq 到不是说有多难,关键是细节太多了,我和wcz口胡了一下我的思路,然后他写了一晚上没调出来qwq 解法挺套路的,先提出一 ...
SPOJ2713GSS4 - Can you answer these queries IV(线段树)
题意 Sol 讲过无数次了..很显然,一个$10^12$的数开方不超过$8$次后就会变为$1$ 因此直接暴力更改即可,维护一下这段区间是否被全改为了$1$ 双倍经验:https://www.luogu ...
jstl(c)标签
一.EL表达式: Expression Language提供了在 JSP 脚本编制元素范围外(例如:脚本标签)使用运行时表达式的功能.脚本编制元素是指页面中能够用于在JSP 文件中嵌入 Java 代码 ...
flask-bootstrap
pip install bootstarp 使用bower安装bootstrap的命令是: bash$ bower install bootstrap不过问题出在如何安装bower上. 官方网站上这样 ...
gitlab文件夹的权限不要随便给777
gitlab 权限给到777 不一定有用
5-2 os模块
导入os模块 import os res = os.listdir('D:\study') # 列出某个目录下的所有文件 os.remove('newuser.json') # 删除某个目录下的某个文 ...
Redux百行代码千行文档
接触Redux不过短短半年,从开始看官方文档的一头雾水,到渐渐已经理解了Redux到底是在做什么,但是绝大数场景下Redux都是配合React一同使用的,因而会引入了React-Redux库,但是正是 ...

jquery 实践操作：iframe 相关操作

jquery 实践操作：iframe 相关操作的更多相关文章

随机推荐

热门专题