【4858美高梅】jQuery实现跨域iframe接口方法调用,jQuery的达成原理的模仿代码

By admin in 4858美高梅 on 2019年7月21日

cross.js

jQuery达成跨域iframe接口方法调用,jqueryiframe

cross.js

复制代码 代码如下:
(function(global){
  global.Cross = {
    signalHandler: {},
    on: function(signal, func){
      this.signalHandler[signal] = func;
    },
    call: function(win, domain, signal, data, callbackfunc){
      var notice = {“signal”: signal, “data”: data};
      if(!!callbackfunc){
          notice[“callback”] = “callback_” + new Date().getTime();
          Cross.on(notice[“callback”], callbackfunc);
      }
      var noticeStr = JSON.stringify(notice);
      win.postMessage(noticeStr, domain);
    }
  };
  $(window).on(“message”, function(e) {
    var realEvent = e.originalEvent,
        data = realEvent.data,
        swin = realEvent.source,
        origin = realEvent.origin,
        protocol;
    try {
        protocol = JSON.parse(data);
        var result =
global.Cross.signalHandler[protocol.signal].call(null,
protocol.data);
        if(!!protocol[“callback”]){
          Cross.call(swin, origin, protocol[“callback”], {result:
result});
        }
        if(/^callback_/.test(protocol.signal)){
          delete Cross.signalHandler[protocol.signal];
        }
    } catch (e) {
      console.log(e);
      throw new Error(“cross error.”);
    }
  });
})(window);

a.html

复制代码 代码如下:
<!doctype HTML>
<html>
  <head>
    <script src=”jquery-1.8.3.min.js”></script>
    <script src=”cross.js”></script>
    <script>
      function call_b(){
        var ifw = $(“#ifr”)[0].contentWindow;
        //调用iframe子页面包车型大巴公然的test接口,
子页面域名称为
        Cross.call(ifw,”:
$(“#txt”).val()});
      }
    </script>
  </head>
  <body>
    <input id=”txt” type=”text”/>
    <button onclick=”call_b()”>call</button>
    <iframe id=”ifr”
src=”;
  </body>
</html>

b.html

复制代码 代码如下:
<!doctype HTML>
<html>
【4858美高梅】jQuery实现跨域iframe接口方法调用,jQuery的达成原理的模仿代码。  <head>
    <script src=”jquery-1.8.3.min.js”></script>
    <script src=”cross.js”></script>
    <script>
    //对外祖父开一个接口命名字为test
    Cross.on(“test”, function(data){
      alert(data.t);
    });
    </script>
  </head>
  <body>
  </body>
</html>

以上便是本文所述的iframe跨域的缓慢解决方案了,希望大家能够喜欢。

cross.js 复制代码 代码如下: (function(global){ global.克罗斯 = {
signalHandler: {}, on: function(signal, func){ thi…

在做项目时,遇到了操作iframe的相关难点。业务相当的粗略,其实便是在操作iframe内部有个别窗体时,调用父窗体的贰个函数。于是就写了多个很简短的htm页面用来测量试验,使用网络流行的秘诀在谷歌(Google)浏览器中一贯报错,不能够由此。
父页面parent.html的代码如下

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

// 创建 XHR 对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
}
else {
throw new Error(“Ajax is not supported by this browser”);
}
function ready()
{
alert(“Start……”);
// 通过事件来拍卖异步央浼
xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 )
{
alert( “Ready.”);
if( xhr.status == 200 )
{
alert(“成功获取服务器重临的结果.”);
// 诉求停止之后,能够拿走服务器重回的内容
alert( xhr.responseText );
// 获取服务器再次回到的 json 对象
var alice = eval( “(” + xhr.responseText + “)” );
alert( alice.name );
}
}
};
// 设置央浼参数
xhr.open(“get”, “data.json” );
xhr.send( null );
}

(function(global){
  global.Cross = {
    signalHandler: {},
    on: function(signal, func){
      this.signalHandler[signal] = func;
    },
    call: function(win, domain, signal, data, callbackfunc){
      var notice = {“signal”: signal, “data”: data};
      if(!!callbackfunc){
          notice[“callback”] = “callback_” + new Date().getTime();
          Cross.on(notice[“callback”], callbackfunc);
      }
      var noticeStr = JSON.stringify(notice);
      win.postMessage(noticeStr, domain);
    }
  };
  $(window).on(“message”, function(e) {
    var realEvent = e.originalEvent,
        data = realEvent.data,
        swin = realEvent.source,
        origin = realEvent.origin,
        protocol;
    try {
        protocol = JSON.parse(data);
        var result =
global.Cross.signalHandler[protocol.signal].call(null,
protocol.data);
        if(!!protocol[“callback”]){
          Cross.call(swin, origin, protocol[“callback”], {result:
result});
        }
        if(/^callback_/.test(protocol.signal)){
          delete Cross.signalHandler[protocol.signal];
        }
    } catch (e) {
      console.log(e);
      throw new Error(“cross error.”);
    }
  });
})(window);

<html xmlns=”;
<head><title>
</title>
<script src=”jquery-1.10.1.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
function ParentFunction() {
alert(‘ParentFunction’);
}
</script></head>
<body>
<input type=”button” id=”btnCancel” class=”button” value=”测试”
/>
<iframe id=”FRMdetail” name=”FRMdetail” frameborder=”0″
src=’child.html’ style=”width:100%;height:100%;” ></iframe>
</body>
</html>

jQuery 轻便地包裹了对 xhr 对象的运用,通过对 jQuery
对象扩大常用的拜访方法,然后,提供给 jQuery 对象来使用。

a.html

子页面child.html的代码如下

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

// 主要的扩张在 jQuery.ajax 中。
jQuery.extend({ // #6299
// 须要的默许参数
ajaxSettings: {
url: location.href,
type: “GET”,
contentType: “application/x-www-form-urlencoded”,
data: null,
xhr: window.XMLHttpRequest && (window.location.protocol !== “file:” ||
!window.ActiveXObject) ?
function () {
return new window.XMLHttpRequest();
} :
function () {
try {
return new window.ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) { }
}
},
// 用来安装 jQuery.ajaxSettings ,设置央浼的参数
ajaxSetup: function (settings) {
jQuery.extend(jQuery.ajaxSettings, settings);
},
ajax: function (origSettings) { // 实际的 ajax 函数
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
// 创建 xhr 对象
xhr = s.xhr();
// 回调函数
var onreadystatechange = xhr.onreadystatechange = function (isTimeout)
{
if (xhr.readyState === 4) {
if (xhr.status == 200) {
s.success.call(origSettings, xhr.responseText);
}
}
};
// 设置恳求参数
xhr.open(s.type, s.url);
// Send the data 发出央浼
xhr.send(s.data);
// return XMLHttpRequest to allow aborting the request etc.
return xhr;
},
// 使用 get 格局发出 ajax 央求的章程
get: function (url, data, callback, type) {
// shift arguments if data argument was omited
if (jQuery.isFunction(data)) {
type = type || callback;
callback = data;
data = null;
}
return jQuery.ajax({
type: “GET”,
url: url,
data: data,
success: callback,
dataType: type
});
4858美高梅,}

<!doctype HTML>
<html>
  <head>
    <script src=”jquery-1.8.3.min.js”></script>
    <script src=”cross.js”></script>
    <script>
      function call_b(){
        var ifw = $(“#ifr”)[0].contentWindow;
        //调用iframe子页面的领悟的test接口,
子页面域名称叫
       
Cross.call(ifw,”http://localhost:8088″,”test”,{t:
$(“#txt”).val()});
      }
    </script>
  </head>
  <body>
    <input id=”txt” type=”text”/>
    <button onclick=”call_b()”>call</button>
    <iframe id=”ifr”
src=”>
  </body>
</html>

<html xmlns=”;
<head><title>
</title>
<script src=”jquery-1.10.1.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#btnTest”).click(function (e) {
var t=window.parent;
t.ParentFunction();
});
})
</script></head>
<body>
<input type=”button” id=”btnTest” class=”button” value=”应该获得的值”
/>rrr
</body>
</html>

}); // #6922
// 扩展 jQuery 对象,增加 load 方法
jQuery.fn.extend(
{
load: function (url) {
var self = this;
jQuery.get(url, function (data) {
self.each(function () {
this.innerHTML = data;
}
)
}
)
}
}
)

b.html

互联网上流行的措施 var t=window.parent;
t.ParentFunction();在IE中能调用,然而在谷歌(Google)浏览器中连连提示如下错误,
Blocked a frame with origin “null” from accessing a frame with origin
“null”. Protocols, domains, and ports must match.
英特网找了非常短日子都没办法开采方法,有的也是很早从前的版本,基本上没用了,并且盲目跟随大众,基本上未有测量试验过。于是自个儿寻觅,后来才意识,Google浏览器其实这种办法其实也足以,只是很想获得,必须发表后才方可,在文件系统中调用,就能够并发上面的谬误。
实则还大概有一种html5的艺术postMessage,于是就依据着开始展览了改写,最后代码如下:
父页面parent.html的代码如下

在页面中,能够如下使用。

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<!doctype HTML>
<html>
  <head>
    <script src=”jquery-1.8.3.min.js”></script>
    <script src=”cross.js”></script>
    <script>
    //对曾祖父开三个接口命名称为test
    Cross.on(“test”, function(data){
      alert(data.t);
    });
    </script>
  </head>
  <body>
  </body>
</html>

<html xmlns=”;
<head><title>
</title>
<script src=”jquery-1.10.1.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
this.ParentFunction= function()
{//和注释掉的议程是同一的,也等于说加不加this没什么差异的,因为这里的this就是windows
alert(‘ParentFunction’);
}
// function ParentFunction() {
// alert(‘ParentFunction’);
// }
function receiveMessage(e) {
var data = e.data;
if(data==”ParentFunction”)
{
ParentFunction() ;
}
}
if (typeof window.addEventListener != ‘undefined’) {//使用html5
的postMessage必须管理的
window.addEventListener(‘message’, receiveMessage, false);
} else if (typeof window.attachEvent != ‘undefined’) {
window.attachEvent(‘onmessage’, receiveMessage);
}
</script></head>
<body>
<input type=”button” id=”btnCancel” class=”button” value=”测试”
/>
<iframe id=”FRMdetail” name=”FRMdetail” frameborder=”0″
src=’child.html’ style=”width:100%;height:100%;” ></iframe>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<title></title>
</head>
<body>
<input type=”button” id=”btn” value=”Click me” />
<div id=”msg”>
</div>
<script src=”jQuery-core.js”
type=”text/javascript”></script>
<script src=”jQuery-event-2.js”
type=”text/javascript”></script>
<script src=”jQuery-data.js”
type=”text/javascript”></script>
<script src=”jQuery-extend.js”
type=”text/javascript”></script>
<script src=”jQuery-ajax.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
$(“#btn”).click(function () {
$(“#msg”).load(“hello.txt”);
})

上述便是本文所述的iframe跨域的化解方案了,希望大家能够喜欢。

子页面child.html的代码如下

</script>
</body>
</html>

您大概感兴趣的篇章:

  • 焚林而猎同一页面中五个iframe相互调用jquery,js函数的法子
  • Jquery调用iframe父页面中的成分及艺术
  • jQuery基于ID调用钦赐iframe页面内的点子
  • jQuery达成iframe父窗体和子窗体的互相调用
  • jquery、js调用iframe父窗口与子窗口成分的点子整理
  • 深入分析Jquery取得iframe七月素的三种艺术
  • JQueryiframe页面操作父页面中的成分与格局(实例讲明)
  • jquery
    操作iframe的两种格局总括
  • js与jQuery
    获取父窗、子窗的iframe
  • Jquery情势获取iframe页面中的
    Dom元素
  • jQuery实现frame之间互通的艺术

复制代码 代码如下:

您只怕感兴趣的文章:

  • ajax原理总计附轻易实例及其优点
  • 浅析Ajax的 原理及优劣势
  • JQuery的Ajax跨域央求原理概述及实例
  • 行使iframe达成ajax跨域通讯的贯彻原理(图解)
  • Ajax二级联合浮动菜单完成原理及代码
  • js/ajax超越访问-jsonp的原理和实例(javascript和jquery完结代码)
  • Ajax通讯原理XMLHttpRequest
  • Ajax的内部贯彻机制、原理与施行小结
  • AJAX职业规律及优劣点详解

<html xmlns=”;
<head><title>
</title>
<script src=”jquery-1.10.1.min.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#btnTest”).click(function (e) {
var t=window.parent;
if(!t.ParentFunction)//在不扶助时,使用html5 的postMessage方法
{
t.postMessage(“ParentFunction”, ‘*’);
}
else
{
t.ParentFunction();
}
});
})
</script></head>
<body>
<input type=”button” id=”btnTest” class=”button” value=”应该获得的值”
/>rrr
</body>
</html>

透过改写后,在文件系统中固然也会并发特别错误,但必要调用的主意确实调用了,指标确实达到了,不影响使用了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有