问题说明

最近工作中碰到一个页面有一个主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. [转帖]基于MySQL8.0存储过程实现myawr平台的top sql功能

    概述 众所周知,MySQL数据库中的performance_schema的事件统计表中的统计数据计算的是累计值,如果想要计算某段时间的TOP SQL是不行的,这里考虑用函数定期取值存进中间表定期将累计 ...

  2. [转帖]nginx 反向代理 URL替换方案

    nginx 提供反向代理服务,日常开发过程中有时候我们需要使用nginx 作为代理服务根据url的不同去访问不同的服务器或者不同端口,如下提供两种方案. 1.直接替换location  匹配部分 1. ...

  3. [转帖]15 个必须知道的 chrome 开发工具技巧

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  4. [转帖]银河麒麟高级服务器操作系统V10SP1安装Docker管理工具（Portainer+DockerUI）

    文章目录 一.系统环境配置 二.安装Docker 三.安装Docker管理工具 Docker管理工具之Portainer Portainer简介 Portainer安装 Portainer访问测试 D ...

  5. React Hooks 指北

    前言 这篇文章旨在总结 React Hooks 的使用技巧以及在使用过程中需要注意的问题,其中会附加一些问题产生的原因以及解决方式.但是请注意,文章中所给出的解决方式并不一定完全适用,解决问题的方案有 ...

  6. 什么是PWA 应用？核心技术有哪些

    在国内由于小程序的风生水起,PWA 应用在国内的状况一直都不是很好,PWA 和小程序有很多的相似性,但是 PWA 是由谷歌发起的技术,小程序是微信发起的技术,所以小程序在国内得到了大力的扶持,很快就在 ...

  7. 隐私计算之多方安全计算（MPC，Secure Multi-Party Computation）

    作者:京东科技隐私计算产品部 杨博 1.背景 如今,组织在收集.存储敏感的个人信息以及在外部环境(例如云​​)中处理.共享个人信息时, 越来越关注数据安全.这是遵守隐私法规的强需求:例如美国加利福尼亚 ...

  8. 【JS 逆向百例】HN某服务网登录逆向，验证码形同虚设

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:某政务服务 ...

  9. MySQL 列操作记录

    在 MySQL 中,你可以使用多种命令和语句来执行列操作,包括添加.修改.删除列等.以下是一些与列操作相关的常用 MySQL 命令和语句: 1. 添加列: 添加新列到表格中: ALTER TABLE ...

  10. 🛠 开源即时通讯（IM）项目OpenIM源码部署指南

    OpenIM的部署涉及多个组件,并支持多种方式,包括源码.Docker和Kubernetes等.这要求在确保不同部署方式之间的兼容性同时,还需有效管理各版本之间的差异.确实,这些都是复杂的问题,涉及到 ...