HTML与嵌入的 iframe之间通信

 iframe作为一个html标签,可以嵌入任何的html网页


参数1:frameborder = 是否显示边框,1(有边框),0(无边框)
参数2:height = height属性指定了iframe的像素高度,建议使用css设置。
参数3:width = width属性指定了iframe的像素宽度,建议使用css设置。
参数4:name = iframe的名称
参数5:scrolling = iframe是否滚动。yes | no | auto
参数6:src = iframe的网址。


注意:想要判断 iframe 加载是否完成有以下2种方法:


第一种:使用状态来判断;

Myframe.document.readyState == 'complete'


第二种:使用onload 回调函数,把调用的方法都写在这个回调函数里面

Myframe.onload = function()

{

...

}  


iframe 非跨域通信(即Iframe在项目工程文件夹内)

父页面:

  • Html方法:
/** 非跨域向Iframe中发送数据消息,在Iframe中添加名为ReceivedMsg的方法并带有一个msg的回调值
* @param {元素的name值} elementName
* @param {要发送的数据消息} msg
*/
function IframeComunication_NoCross_Html(elementName, msg) 
{
  elementName.window.ReceivedMsg(msg);
}
  •  Jquery方法:
/** 非跨域向Iframe中发送数据消息,在Iframe中添加名为ReceivedMsg的方法并带有一个msg的回调值
* @param {Iframe元素} element
* @param {要发送的数据消息} msg
*/
function IframeComunication_NoCross_Jquery(element, msg) 
{
  $(element)[0].contentWindow.ReceivedMsg(msg);
}

 子页面:

/** 非跨域接收父页面发送的数据消息
* @param {接收到的数据消息} msg
*/
function ReceivedMsg(msg) 
{
  console.log(msg);
}

 iframe 跨域通信(即Iframe不在项目工程文件夹内,兼容非跨域)

父页面:

/** 跨域(可兼容非跨域)向Iframe中发送数据消息,在Iframe中添加 message 监听事件
* @param {元素} element
* @param {要发送的数据消息} msg
*/
function IframeComunication_Cross_Jquery(element, msg) 
{
  let iframe_url = ws_Attribute_Get(s_corner_module_left, "src").split("?")[0];
  $(element)[0].contentWindow.postMessage(msg, ws_Get_HostName("host") + iframe_url);
}

 子页面:

window.addEventListener("message", function (e) 
{
  console.log(e.data);
});

 附件方法:

 /** 获取URL地址
* host =  www.test.com:8082
* hostname =  www.test.com
* port =  8082
* protocol =  http
* pathname =  index.php
* href =  http://www.test.com:8082/index.php#tab2
* hash = #tab2
* search = ?foo=123
* @param {String} type
*/
function ws_Get_HostName(type)
{
  return "http://" + $(location).attr(type) + "/";
}

猜你喜欢

转载自blog.csdn.net/seven7745101/article/details/127151630
今日推荐