iframe相关操作
内容摘要
- 父级获取iframe中的元素
- 父级触发iframe中的函数
- iframe触发父级元素绑定的事件
- iframe触发父级函数方法
- iframe触发父级元素的值
parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
iframe {
border: 0;
}
</style>
</head>
<body>
<p>下面为要调用的iframe标签，也可以通过类名来设置宽高</p>
<iframe src="ifr.html" name="ifr" width="100%" height="200" class="ifr" id="ifr"></iframe>
<!-- iframe触发父页面事件 -->
<p>我是父页面的内容,点击iframe中的按钮，触发父页面中的事件，改变 <span class="change1">#1</span></p>
<p class="change11">子级iframe会改变我的内容</p>
<!-- 父页面调用子iframe的方法 -->
<button class="p-btn1">点我调用子iframe中的方法</button>
<div id="parent-val">我是父页面的内容</div>
</body>
<script src="./jquery.min.js"></script>
<script>
function fun() {
alert("点击子元素中的按钮执行父元素中的函数")
}
$(".change1").on('click', function() {
console.log('parent')
$(this).html("#1#1")
})
$(".p-btn1").on('click', function() {
// 调用子iframe中的方法
parent.frames["ifr"].window.childMethods1();
$(".ifr")[0].contentWindow.childMethods1();
document.getElementById("ifr").contentWindow.childMethods1();
// 查找iframe中的元素
console.log($(".ifr").contents().find(".title").html())
// 原生方法候去iframe元素的值
let doc=document.getElementById("ifr").contentWindow.document;
let tit=doc.getElementById("ifr-val").innerHTML;
console.log(tit)
})
</script>
</html>
ifr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe1</title>
</head>
<body>
<div id="ifr-val">我是ifr的内容</div>
<p class="title">我是iframe1</p>
<button type="button" class="ifr1-btn">点我改变父页面内容 #1->#1#1</button>
</body>
<script src="jquery.min.js"></script>
<script>
function childMethods1() {
console.log('我是子iframe中的方法!')
}
$(".ifr1-btn").on('click', function() {
console.log("iframe1")
// 点击触发父页面的事件
parent.$(window.parent.document).find('.change1').click()
// 点击直接改变父页面中的dom
parent.$(window.parent.document).find('.change11').html("gggg")
// 点击执行父页面中定义的方法
parent.fun()
window.parent.fun()
// 获取父元素中元素的内容
console.log($(".p-btn1", window.parent.document).html())
console.log(window.parent.$(".p-btn1").html())
console.log(window.parent.document.getElementById("parent-val").innerHTML)
})
</script>
</html>
总结
原生js
父调子
元素：window.frames[iframe的name属性值];
方法：
- ① document.getElementById("子页面元素ID").contentWindow.子页面方法名;
- ② document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名;
- ③ document.getElementsByClassName("子页面元素类名")[i].contentWindow.子页面方法名;
子调父
元素：
- ① window.parent.document.getElementById("父页面元素ID");
- ②window.parent.document.getElementsByTagName("父页面元素标签名")[i];
- ③window.parent.document.getElementsByClassName("父页面元素类名")[i];
方法：window.parent.父页面方法;
原生方法还是使用id比较靠谱
jquery
父调子
元素：$(iframe选择器).contents().find(iframe中元素选择器);
// 查找iframe中的元素
console.log($(".ifr").contents().find(".title").html())
方法：$(iframe选择器)[0].contentWindow.子页面方法名;
// 调用子iframe中的方法
parent.frames["ifr"].window.childMethods1();
$(".ifr")[0].contentWindow.childMethods1();
子调父
元素：
- ① $(父页面元素选择器, window.parent.document);
- ② window.parent.$(父页面元素选择器)
// 获取父元素中元素的内容
console.log($(".p-btn1", window.parent.document).html())
console.log(window.parent.$(".p-btn1").html())
parent.$(window.parent.document).find('.change11').html("gggg")
方法：window.parent.父页面方法;
// 点击执行父页面中定义的方法
parent.fun()
window.parent.fun()
// 点击触发父页面的事件
parent.$(window.parent.document).find('.change1').click()
iframe相关操作的更多相关文章
- jquery 实践操作：iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- javascript iframe相关操作
1. 获得iframe的window对象 iframeElement.contentWindow 2. 获得iframe的document对象 存在跨域访问限制. chrome:iframeEleme ...
- iframe的操作
获取iframe的window,获取Iframe的document,获取父页面的window,某个环境是否iframe,动态创建iframe 这是demo.html,这个页用iframe嵌入了ifra ...
- 从零自学Hadoop(20)：HBase数据模型相关操作上
阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 从零自学Hadoop(21)：HBase数据模型相关操作下
阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- 理解CSV文件以及ABAP中的相关操作
在很多ABAP开发中,我们使用CSV文件,有时候,关于CSV文件本身的一些问题使人迷惑.它仅仅是一种被逗号分割的文本文档吗? 让我们先来看看接下来可能要处理的几个相关组件的词汇的语义. Separat ...
- Liunx下的有关于tomcat的相关操作 && Liunx 常用指令
先记录以下liunx下的有关于tomcat的相关操作 查看tomcat进程: ps-ef|grep java (回车) 停止tomcat进程: kill -9 PID (进程号如77447) (回车) ...
- pip的相关操作
>Python中的pip是什么?能够做些什么? pip是Python中的一个进行包管理的东西,能够下载包.安装包.卸载包......一些列操作 >怎么查看pip的相关信息 在控制台输入: ...
- python操作mysql数据库的相关操作实例
python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...
随机推荐
- TCP状态详解
CLOSED: 这个没什么好说的了,表示初始状态. LISTEN: 这个也是非常容易理解的一个状态,表示服务器端的某个SOCKET处于监听状态,可以接受连接了. SYN_RCV ...
- nginx错误
在开发的时候遇到nginx错误 网上找了半天也没有找到解决方案: 先查看了一下nginx错误日志 cat /usr/local/nginx/logs/error.log 然后发现看不太懂 那么只能重启 ...
- Activiti：MalformedByteSequenceException: 3 字节的 UTF-8 序列的字节 3 无效。
在win下开发,有时编译或运行项目会报3字节的UTF-8序列的字节3无效. 解决该问题的办法 1.将xml头文件改为GBK编码方式 ,我这里不OK <?xml version="1.0 ...
- 机器学习：SVM（非线性数据分类：SVM中使用多项式特征和核函数SVC）
一.基础理解 数据:线性数据.非线性数据: 线性数据:线性相关.非线性相关:(非线性相关的数据不一定是非线性数据) 1)SVM 解决非线性数据分类的方法 方法一: 多项式思维:扩充原本的数据,制造新的 ...
- ManualResetEvent 用法
第一.简单介绍 ManualResetEvent 允许线程通过发信号互相通信.通常,此通信涉及一个线程在其他线程进行之前必须完成的任务.当一个线程开始一个活动(此活动必须完成后,其他线程才能开始)时, ...
- 发RTX通知
安装sdk 在RTXServer目录下找到WebRoot目录,找到里面的SendNotify.cgi(就是一个php页面,默认是pc - ascii编码).打开页面,在头部加上编码信息 header( ...
- python学习笔记(二):python数据类型
上一篇博客写了python的入门和简单流程控制,这次写python的数据类型和各种数据类型的内置方法.一.数据类型是什么鬼?计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各 ...
- nginx upstream的几种配置方式
nginx 的upstream目前支持4种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ,如果后端服务器down掉,能自动剔除. 2.weight指定轮询几率,weigh ...
- DDD学习笔录——提炼问题域之知识提炼与协作
提炼问题域的意义 理解一个复杂问题域以便创建简单且有用的模型需要深入详尽的知识以及深刻的见解,这些只能通过与从内到外理解该领域的人协作得到.对模型的设计进行连续实验和探究正是DDD的能力所能实现的.只 ...
- C语言学习笔记--指针阅读技巧
1. 指针阅读技巧:右左法则 (1)从最里层的圆括号中未定义的标示符看起 (2)首先往右看,再往左看 (3)遇到圆括号或方括号时可以确定部分类型,并调转方向 (4)重复 2.3 步骤,直到阅读结束 注 ...