美文网首页
关于百度ueditor中牵涉到的iframe的知识

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

作者: lMadman | 来源:发表于2017-10-26 11:12 被阅读0次

    一般来说,这个东西现在很少用,不过这个开发百度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!

    相关文章

      网友评论

          本文标题:关于百度ueditor中牵涉到的iframe的知识

          本文链接:https://www.haomeiwen.com/subject/gwlcpxtx.html