web两个iframe之间互相调用方法

雨点打透心脏的1/2处 2023-06-07 12:19 1阅读 0赞

假如有两个iframe在同一个页面上，一个id为if1，另一个为if2。  
想要在if1中调用if2中的方法,只需在if1中添加如下代码：

window.parent.document.getElementById('if2').contentWindow.需要调用的方法;  
例：  
1、main.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>无标题文档</title>  
<link href="../css/main.css" rel="stylesheet" type="text/css">

</head>

<body>  
    <div>  
        <iframe src="if1.html" id="if1"></iframe>  
        <iframe src="if2.html" id="if2"></iframe>  
    </div>  
</body>  
</html>

2、if1.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>

<body>  
    <button οnclick="window.parent.document.getElementById('if2').contentWindow.show();">测试</button>  
</body>  
</html>

3、if2.html

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>if2</title>  
<script type="text/javascript">  
    function show()\{  
        alert();  
    \}

</script>  
</head>  
<body>

</body>  
</html>

运行结果：  
![这里写图片描述][20160803113058275]

[20160803113058275]: /images/20230601/3c3b2aeaf06d4fe5a0e7b3f41578d49c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关用js互相调用iframe页面内的js函数

[用js互相调用iframe页面内的js函数][js_iframe_js] http://www.jb51.net/web/18555.html 1，首先获得右栏ifr

比眉伴天荒/ 2023年10月18日 23:59/ 0 赞/ 113 阅读

相关解决同一页面中两个iframe互相调用jquery,js函数

[https://www.cnblogs.com/edisoner/p/6118368.html][https_www.cnblogs.com_edisoner_p_61183

朱雀/ 2023年07月13日 13:38/ 0 赞/ 149 阅读

相关两个方法事务调用问题

方法a调用方法b，两个方法都使用事务，易出错的问题 @Autowired private OrderService orderService;

心已赠人/ 2023年06月30日 06:56/ 0 赞/ 117 阅读

相关 web两个iframe之间互相调用方法

假如有两个iframe在同一个页面上，一个id为if1，另一个为if2。想要在if1中调用if2中的方法,只需在if1中添加如下代码： window.parent.do

雨点打透心脏的1/2处/ 2023年06月07日 12:19/ 0 赞/ 2 阅读

相关 Android和JS之间互相调用方法并传递参数

场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

╰+哭是因爲堅強的太久メ/ 2022年10月04日 15:55/ 0 赞/ 339 阅读

相关两个结构体之间的相互调用

指向结构体类型变量的使用首先让我们定义结构体： struct stu \{ char name\[20\]; long number; f

淩亂°似流年/ 2022年07月14日 02:14/ 0 赞/ 181 阅读

相关判断两个整数是否能互相整除的两种方法

syntax tips Java中整数字面量默认类型为`int`。 `byte`, `short`类型自动扩张为`int

客官°小女子只卖身不卖艺/ 2022年02月19日 08:53/ 0 赞/ 416 阅读

相关 iframe 父子页面间方法/属性互相调用

父页面调用子页面父页面调用子页面方法： $("mainfrm")[0].contentWindow.test(); //mainfrm 父页面I

痛定思痛。/ 2021年12月04日 02:45/ 0 赞/ 399 阅读

相关 springcloud中后端方法之间的互相调用

本篇博客就是为了记录以便自己之后的使用，同时要是能方便用到的网友使用也是更好地。 1、明确目标后端application-name。举栗子：

柔光的暖阳◎/ 2021年11月17日 11:50/ 0 赞/ 458 阅读

相关父iframe调用子iframe的方法及元素

摘要：在父iframe中调用子iframe的方法及元素假设：父页面内容：父页面中有个ID为mainFrame的子iframe，该iframe连接的src=

怼烎@/ 2021年09月14日 15:36/ 0 赞/ 835 阅读