前端iFrame跨域问题

时间:2021-05-23 16:12:11

一、父域访问子域的元素

项目需求:

  iFrame是个聊天窗口,要求聊天窗口中点击图片图标,在父域将内容展示出来。

解决方法:(jQuery)

  首先/要等iFrame加载完再执行函数!(代码如下)

   var isOnLoad = true;

    $('#iframe_con').load(function() {
          isOnLoad = false;// 加载完成
         Apple();
     });

  然后/在父域里选择子域的元素添加事件和完成函数即可!(代码如下)  

    //模态框
   function Apple(){

    var oE={
      wheight:$(window).height(),
      wwidth:$(window).width(),
      showdown:$('.showdown'),
      Apple:$('.Apple_wait'),
      Close:$('.ApClose'),
      Btn:$('#iframe_con').contents().find('.Apactive_chat')//选择子域的元素
      };

    oE.showdown.height(oE.wheight>$('html').height()?oE.wheight:$('html').height());

    oE.Apple.css({left:(oE.wwidth-560)/2,top:(oE.wheight-207)/2+$(window).scrollTop()});

    oE.Btn.click(function(){//给子域的元素绑定事件

      oE.showdown.fadeIn();
      oE.Apple.fadeIn();
    });

    oE.Close.click(function(){
      oE.showdown.fadeOut();
      oE.Apple.fadeOut();
   });

二、子域访问父域的元素    

function zgz(){

$(window.parent.$("#maindiv").html("子页面赋过来的值"));

}