iframe跨域访问父框架js方法

Posted 2020-08-20 m、y

iframe跨域访问父框架js方法

条件

1.不在同一个主域下

2.iframe调用父框架方法

 

环境说明

父框架有打开TAB页方法，但是子页面嵌入的是其他系统页面，同样需要打开TAB页。

 

方法描述

原理上就是通过子页面嵌入父框架页面来使用调用方法

父框架桥连页面

 1 @{
 2     ViewBag.Title = "跨域桥连";
 3     Layout = "~/Views/Shared/_LayoutCenter.cshtml";
 4 }
 5 
 6 @section Scripts{
 7 <script>
 8     parent.parent.DomainAddtabs("@ViewBag.Url", "@ViewBag.Name"); // execute main function
 9 </script>
10 }

子系统js方法

 1 /*
 2  跨域问题
 3 */
 4 ; (function ($) {
 5     $.extend({
 6         sendDomain: function (opt, callback) {
 7             var defaults = {
 8                 wmsUrl: ‘#‘,
 9                 icon: ‘icon-house_in‘, //图标
10                 title:‘title‘,
11                 sapUrl: ‘#‘
12             };
13             var opts = $.extend(defaults, opt);
14 
15             try {
16                 var parent = window.parent;
17                 var url = opts.wmsUrl;
18                 var icon = "icon " + opts.icon;
19                 window.parent.addTab(opts.title, url, icon);
20             } catch (e) {
21                 var url = opts.wmsUrl;
22                 $.execMain(url, opts.title, opts.sapUrl);
23             }
24             if (callback) {
25                 callback();
26             }
27         },
28         // exec main function
29         execMain: function (url, name, mainUrl) {
30             if (typeof (exec_obj) == ‘undefined‘) {
31                 exec_obj = document.createElement(‘iframe‘);
32                 exec_obj.name = ‘tmp_frame‘;
33                 exec_obj.src = mainUrl + ‘?url=‘ + url + ‘&name=‘ + name;
34                 exec_obj.style.display = ‘none‘;
35                 document.body.appendChild(exec_obj);
36             } else {
37                 exec_obj.src = mainUrl + ‘?url=‘ + url + ‘&name=‘ + name + ‘&‘ + Math.random();
38             }
39         }
40     });
41 })(jQuery);

 

完成。