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) + "/";
}