问题说明

最近工作中碰到一个页面有一个主iframe A，用于操作主要业务元素。其中有一个弹出框里面也嵌入了一个iframe B，

此时，我需要在B中调用A中JS的指定方法。下面咱们来通过例子还原一下这个场景，看如何实现的。

主页面html

testframe.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <iframe id="frame1" src="frame1.html" width="400px" height="300px"></iframe>

    <iframe id="frame2" src="frame2.html" width="400px" height="300px"></iframe>

</body>

</html>

iframe1即A页面

frame1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>iframe1</title>

    <script type="text/javascript">

        function frame1_func() {

            alert("你调用了frame1的函数！");

        }

    </script>

</head>

<body>

<h1>这是iframe1</h1>

</body>

</html>

iframe2即B页面

frame2.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>iframe2</title>

    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript">

        function frame2_func(){

            //调用frame1_func

            $(window.parent.document).contents().find("#frame1")[0].contentWindow.frame1_func();

        }

    </script>

</head>

<body>

    <h1>这是iframe2</h1><br>

    <button id="clickMe" οnclick="frame2_func()">点击我调用frame1方法</button>

</body>

</html>

测试结果

html中iframe调用兄弟iframe中的js方法的更多相关文章

  1. WinForm中嵌入WebBrowser,并且支持C#和JS方法的相互调用

    纯粹WinForm界面不够友好,实现数据复杂度高的处理有些力不从心,所以看了看api以后决定用html来做. 我的wlw的代码插件不是很好用,大家凑合看吧 类前说明引用和权限 1: [Permissi ...

  2. 项目中Ajax调用ashx页面中的Function的实战

    前台页面: 使用几个display=none的空间存储DropdownList中的值,点击Search Button后刷新页面再次给DropdownList赋值使用 <%@ Page Langu ...

  3. C代码中如何调用C++ C++中如何调用C

    注意这里的C调用C++或者C++调用C意思是.c文件中调用.cpp文件中代码,或者相反. 集成开发环境如VC++6.0或者vs都是以文件后缀来区别当前要编译的是C代码还是C++代码,然后采用响应的编译 ...

  4. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  5. iframe中子父窗口互调的js方法

    转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...

  6. Java使用正则表达式取网页中的一段内容(以取Js方法为例)

    关于正则表达式: 表1.常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串 ...

  7. js中同一个onclick绑定了两个js方法出现的问题

    问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...

  8. 调用上一个页面的js方法

    点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get(&qu ...

  9. android 中activity调用远程service中的方法之 aidl的使用

    服务端:只有服务,没有界面 1.编写interface文件,复制到 .aidl 文件中,并去掉其中的public 等修饰符.系统会自动在gen目录下生成对应的java文件  (对应本地调用中的接口文件 ...

  10. android 中activity调用本地service中的方法。

    1.自定义一个接口,暴露服务中的方法 public interface IService {    /**服务中对外暴露的方法 */    void methodInService();} 2.自定一 ...

随机推荐

  1. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.12.11）

    一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘,别人可以直接下载,避免 ...

  2. 配置Chrome支持网页内的frame跨域

    前言 跨域限制可以保证安全,但是调试的时候关掉会更方便,然而现在网络上能找到的关闭跨域限制方法,在新版的Chrome浏览器上根本没用-- 经过一番摸索,发现用旧版的Chrome就可以绕过跨域限制,刚好 ...

  3. [转帖]是什么让 Redis“气急败坏”回击：13 年来，总有人想替 Redis 换套新架构

    https://www.infoq.cn/article/AlF5NIhHdskayl0MTyQG 回击就代表输了?! 今年年中,一位前谷歌.前亚马逊的工程师推出了他创作的开源内存数据缓存系统 Dra ...

  4. [转帖]【jmeter】BeanShell用法详细汇总

    一.什么是Bean Shell BeanShell是用Java写成的,一个小型的.免费的.可以下载的.嵌入式的Java源代码解释器,具有对象脚本语言特性,非常精简的解释器jar文件大小为175k. B ...

  5. Python学习之十一_Windows获取硬件信息

    Python学习之十一_Windows获取硬件信息 简介 网上找了一些方法简单整理了下,可以快速获取部分信息 包含机器名称等. 以及序列号相关 部分学习来源: https://blog.51cto.c ...

  6. [转帖]整理常用的 vim 命令

    vim 是一款功能强大的文本编辑器,它是Linux下常用的编辑器之一,对于熟练掌握了 vim 的人来说,用它编辑文件,方便又快捷,能极大的提高工作效率 vim 功能强大,对应的命令也非常的多,对于初学 ...

  7. 使用linux上面powershell安装vm powercli 连接vcenter 通过计划任务自动创建部分虚拟机的快照以及自动清理过期快照的办法

    经过一晚上的折腾, 终于验证出来一个非常简单的方法. 也比较好理解和使用. 这里简单记录一下: 使用linux上面powershell安装vm powercli 连接vcenter 通过计划任务自动创 ...

  8. pytest-xdist分布式

    使用pytest框架运行每条case的时候,都是上一条运行结束才会运行下一条,要是有成千上百条case 且每条运行2s那就是2*总条数,会浪费大量的时间和人力.为了节约时间和人力成本,pytest提供 ...

  9. GIT专业术语教程-转载

    目录 一.版本控制概要 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 1.4.2.集中版本控制 1.4.3.分布式版本控制 1.5 ...

  10. LeetCode贪心算法习题讲解

    实验室的算法课程,今天轮到我给师弟师妹们讲贪心算法,顺便也复习一下. 贪心算法这个名字听起来唬人,其实通常是比较简单的.虽然通常贪心算法的实现非常容易,但是,一个问题是否能够使用贪心算法,是一定要小心 ...