iframe子页面与父页面跨域相互访问方法

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_33881041

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量439

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/love920526/p/4562302.html

版权

自己没事写着玩，要学习的比较多，先记录下来，以后慢慢修改！

1.先写同域情况下的iframe的父子调用

父窗口

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7 </head>
 8 <body>
 9     //父窗口
10     <iframe id="iframe1" name="ifrmae2" src="iframe.htm" id="iframe1"></iframe>
11     <button onclick="da()">你好</button>
12     <script>
13         //父窗口自己的方法
14         function name(){
15             alert("1111");
16         }
17         //这里获取子页面的方法，这里的方法获取是依据iframe中的属性name来调用子页面的。
18         function da(){
19             window.ifrmae2.had();
20         }
21     </script>
22 </body>
23 </html>

子窗口

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
 7 </head>
 8 <body>
 9 <table class="table">
10     <thead>
11         <tr>
12             <td></td>
13         </tr>
14     </thead>
15     <tbody>
16         <tr>
17             <td>1</td>
18             <td>2</td>
19         </tr>
20         <tr>
21             <td>a</td>
22             <td>b</td>
23         </tr>
24     </tbody>
25 </table>
26 <input type="text" id="text1" onclick="btn()" value="你好" style="">
27 <script>
28         //子页面本身的方法
29         function had(){
30             var inp=document.getElementById("text1");
31             inp.style.color="red";
32         }
33 
34         //获取父窗口的方法
35         function btn(){
36             parent.name();
37         }
38 </script>
39 </body>
40 </html>

这样就可以在父窗口中操作父子窗口了。

转载于:https://www.cnblogs.com/love920526/p/4562302.html

weixin_33881041

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe子页面与父页面跨域相互访问方法

自己没事写着玩，要学习的比较多，先记录下来，以后慢慢修改！1.先写同域情况下的iframe的父子调用父窗口 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title&g...
复制链接

扫一扫