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

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

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

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

关于 iframe 的相关操作：

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

    1. 示例：
      父页面：parentPage.html 文件，里面含有一个 iframe<!DOCTYPE html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>页面首页</title>
    6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.     <div id='parDiv'>父页面</div>
    10.     <iframe src="childPage.html" id="youyou" height="" width=""></iframe>  <!-- 包含的 iframe -->
    11.  
    12.     <script>
    13.         <!-- 父页面调用子页面 测试： 使用 id 属性调用 -->
    14.         window.onload = function(){
    15.             document.getElementById('youyou').contentWindow.document.getElementById('test').style.color = '#ff1e19';
    16.             //  等价于jquery:  $("#youyou").contents().find("#test").css('color','red');
    17.         };
    18.     </script>
    19. </body>
    20. </html>
    1. 子页面：childPage.html 文件，里面含有一个 iframe
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>子页面</title>
    6. </head>
    7. <body>
    8.     <div id="test">我是iframe测试的子页面</div>
    9. </body>
    10. </html>
    1. 运行父页面，会看到父页面的iframe部分写入了子页面文字!!
    2.  
    3. 总结：
    1. 1. 父页面中 JS 获取/更改iframe子页面内容:
    2.   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"); 替换子页面原来的所有内容
    1. 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()
    1. 其他操作（未测）：
      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

    1. 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");
    1.  
    1. 父页面里的 iframe 中的某个元素获取
    1.  
    1.  
  • iframe 父页面获取&操作子页面元素（使用 iframe  name 属性调用） 
    1. 示例：
    2. 父页面：parentPage.html，
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>页面首页</title>
    6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.     <iframe name="iframe1" src="childPage.html"></iframe>
    10.     <script>
    11.         window.onload =function () {
    12.             $(window.frames["iframe1"].document).on("click","#btn",function(){  //window.frames["iframe1"].document获的iframe标签嵌套页面document对象
    13.                 $(this).html("");
    14.             })
    15.         }
    16.     </script>
    17. </body>
    18. </html>
    1. 子页面：childPage.html，
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>子页面</title>
    6. </head>
    7. <body>
    8.     <button id="btn">测试操作</button>
    9.  
    10. </body>
    11. </html>
    1.  

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

    1.  
  • 子页面 操作获取&操作父页面元素： 
    1. 参考： http://www.jb51.net/article/43406.htm
    2.  
    3. 父页面写好div+iframe, 子页面中 JS 调用相应的元素，方法等
    4.  
    5. 父页面：parentPage.html, 书写页面
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>页面首页</title>
    6. </head>
    7. <body>
    8.     <form id="form1"></form>
    9.     <div>
    10.         <div id="default" style="width: 100px; height: 100px; float: left;">default 里的卡卡</div>
    11.         <iframe id="iframeid" src="childPage.html" style=" width:400px; height:400px; float:left;"></iframe>
    12.     </div>
    13.  
    14.     <script>
    15.         var h = "hello";
    16.         function getHelloWo() {
    17.             alert("welcome to the world");
    18.         }
    19.     </script>
    20. </body>
    21. </html>
    1. 子页面： childPage.html操作父页面
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>子页面</title>
    6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.     <script>
    10.         $(function () {
    11.             //在iframe中查找父页面元素
    12.             alert($("#default", window.parent.document).html());
    13.             //在iframe中调用父页面中定义的方法
    14.             parent.getHelloWo();
    15.             //在iframe中调用父页面中定义的变量
    16.             alert(parent.h);
    17.         })
    18.     </script>
    19. </body>
    20. </html>
    1. 运行 父页面 parentPage.html 看看效果，会不断弹出窗口；
    1. 总结：
    1. 原生 js 父页面元素的获取，方法的调用：
    2. . 子页面调用父页面方法：
    3.     格式：parent.父页面方法
    4.     实例：parent.pClick(); // pClick 为父页面 js 方法
    5.  
    6. . 子页面获取父页面元素：
    7.     格式：window.parent.document.getElementById("父窗口元素ID");
    8.     实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id

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

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>父级页面</title>
    6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.     <div id="example">这是父级页面！</div>
    10.     <iframe name="iframe1" src="childPage.html"></iframe>
    11. </body>
    12. </html>

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>子页面</title>
    6.     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.     <script language="javascript">
    10.         $("body",parent.document).append('<br>这是子级页面追加的内容！');  //子页面给父页面追加内容
    11.         $("body",parent.document).find('#example').html('子级页面将替换父级页面的内容！');  //子页面改变父页面某个元素内容
    12.     </script>
    13. </body>
    14. </html>

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

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

  1. jquery中对 iframe的操作

    我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...

  2. iframe相关操作

    内容摘要 父级获取iframe中的元素 父级触发iframe中的函数 iframe触发父级元素绑定的事件 iframe触发父级函数方法 iframe触发父级元素的值 parent.html <! ...

  3. javascript iframe相关操作

    1. 获得iframe的window对象 iframeElement.contentWindow 2. 获得iframe的document对象 存在跨域访问限制. chrome:iframeEleme ...

  4. jQuery学习笔记--JqGrid相关操作 方法列表（上）

    1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridi ...

  5. linux网络操作 防火墙相关操作

    防火墙状态 查询防火墙状态 service iptables status 停止防火墙 service iptables stop 启动防火墙 service iptables start 重启防火墙 ...

  6. iframe的操作

    获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...

  7. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  8. Jquery 操作IFrame

    使用jquery操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id ...

  9. jquery 操作iframe的几种方法总结

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作 DOM方法: 父窗口操作IFRAME:window.frames["iframeSo ...

随机推荐

  1. el-upload控件一次接口请求上传多个文件

    el-upload组件默认情况下上传多少个文件就会请求多少次上传接口,如何一次上传多个文件而不必多次请求上传接口呢?直接看代码 html <el-upload :action="act ...

  2. GMap.Net解决方案之在WinForm和WPF中使用GMap.Net地图插件的开发

    在做地理位置相关的开发时,总是面临高额地图引擎费用让大部分用户望而却步,加之地图数据又是天价,那么GMap.NET就是首选了,它本身就是开源免费,服务器可以在本地缓存,以后访问时就可以直接访问. 可以 ...

  3. IOS后台执行

    大多数应用程序进入后台状态不久后转入暂停状态.在这种状态下,应用程序不执行任何代码,并有可能在任意时候从内存中删除.应用程序提供特定的服务,用户可以请求后台执行时间,以提供这些服务. 判断是否支持多线 ...

  4. JavaScript 遍历对象查找指定的值并返回路径

    问:JavaScript 如何查找对象中某个 value 并返回路径上所有的 key? let obj = { key1: 'str1', key2: { key3: 'str3' }, key4: ...

  5. Angular2 Service获取json数据

    在Angular2框架下一般交互解析json是要用到Service的,其实除了Service还是很多的,今天先写个最简单的前后端数据交互 嗯~~ 首先我先在app包下直接创建Service 好了 这里 ...

  6. Bzoj 1081 [Ahoi2009] chess 中国象棋

    bzoj 1081 [Ahoi2009] chess 中国象棋 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1801 状态比较难设,的确 ...

  7. 对数据仓库Hive的一些认识

    首先我们得明白什么是数据仓库?   数据仓库,英文名称为Data warehouse,可简写为DW或DWH.数据仓库的目的是构建面向分析的集成化数据环境,为企业提供决策支持(Decision Supp ...

  8. Kubernetes配置Ceph RBD StorageClass

    1. 在Ceph上为Kubernetes创建一个存储池 # ceph osd pool create k8s 2. 创建k8s用户 # ceph auth get-or-create client.k ...

  9. Diycode开源项目 MyTopicActivity分析

    1.总体浏览效果及布局分析 1.1.看一下我的帖子预览效果 1.2.然后看一下我的收藏预览效果 1.3.归纳一下 所以我的帖子和我的收藏可以共用同一个类. 布局效果几乎一样,只是用户的选择不同. 所以 ...

  10. loj2056 「TJOI / HEOI2016」序列

    当年我还没学cdq的时候在luogu上写过树套树的代码orzzz ref #include <algorithm> #include <iostream> #include & ...