关于百度ueditor中牵涉到的iframe的知识

一般来说,这个东西现在很少用,不过这个开发百度uditor的“我的图片库”功能,这个是嵌套在百度上传dialog中的,而百度uditor中的dialog几乎保持使用了清一色的iframe框架,那么现在就来说一下我今天踩过的坑:

  1. 在iframe中执行元素的click事件,如何触发父级页面元素的click事件?
//js代码
格式:window.parent.document.getElementById("父窗口的元素ID").click();  
实例:window.parent.document.getElementById("btnOk").click(); 

//jquery代码
格式:$('#父窗口中的元素ID', parent.document).click();  
实例:$('#btnOk', parent.document).click();  

//以上的上网的代码,我使用的是这样的:
格式:parent.$('#父窗口中的元素ID',parent.document).trigger('click');
实例:parent.$('#ipaiban_login_btn',parent.document).trigger('click');  //亲测

2.在父级页面触发iframe中元素的事件?

//js代码:
格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();  
实例:window.frames["ifm"].document.getElementById("btnOk").click();  

//jquery代码:
格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();
实例:$("#ifm").contents().find("#btnOk").click();  //亲测

//还可以这样:
格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();
实例:$("#btnOk",document.frames("ifm").document).click();

3.在iframe中如何获取当前iframe的id值?

var iframeId = window.frameElement && window.frameElement.id || '';

4.在iframe中如何传值到父级页面中?

这个问题就厉害了,首先我想到了是使用cookie,然后我悲痛的发现cookie行不通,好像牵涉到跨域问题,人家不认为你是同一域下的,为了安全考虑,就给拦截了,当然网上有一些解决的方法,不过看起来有点麻烦。

那么,我就想到了h5中的本地存储,就试了一下用localStorage进行存储,再在父级页面用localStorage取出来,方法是行得通的,不过这就牵涉到一个兼容的问题,还好我这个功能不需要这个,happy hacking!

推荐阅读更多精彩内容