zoukankan      html  css  js  c++  java
  • 获取子页面iframe的点击事件及iframe跨域的交互

    1、获取子页面iframe的点击事件

      1.1、获取iframe

        var frame = document.getElementById('addrClick2');

      1.2、获取点击事件

    var IframeOnClick = {
    resolution: 200,
    iframes: [],
    interval: null,
    Iframe: function () {
    this.element = arguments[0];
    this.cb = arguments[1];
    this.hasTracked = false;
    }, track: function (element, cb) {
    this.iframes.push(new this.Iframe(element, cb));
    if (!this.interval) {
    var _this = this;
    this.interval = setInterval(function () {
    _this.checkClick();
    }, this.resolution);
    }
    }, checkClick: function () {
    if (document.activeElement) {
    var activeElement = document.activeElement;
    for (var i in this.iframes) {
    if (activeElement === this.iframes[i].element) { // user is in this Iframe

    if (this.iframes[i].hasTracked == false) {
    this.iframes[i].cb.apply(window, []);
    this.iframes[i].hasTracked = true;
    }
    }
    else {
    this.iframes[i].hasTracked = false;
    }
    }
    }
    }
    };
    //此处写iframe点击后需要处理的事
    IframeOnClick.track(frame, function () {
    处理的事
    });

    2、iframe跨域的交互
    2.1、获取iframe
      var frame = document.getElementById('addrClick2');
    2.2向子页面传输信息
      frame.contentWindow.postMessage('setLocation,' + null + "," + null, '*');
      setLocation,可随意编写,只要和iframe里的message的方法对应上
    2.3、获取子页面传输的信息
    window.addEventListener('message', function (event) {
    //此处执行事件
    var data = event.data;
    var str = data.split(',');
    if ("setLocation" == str[0]) {
    getLocation(str[1], str[2]);
    if (str[3]) {
    getJKInfo(str[3]);
    }
    }
      })
     
     
  • 相关阅读:
    AngularJS7那些不得不说的事故
    Python和C++的混合编程(使用Boost编写Python的扩展包)
    为OPENCV添加freetype支持并显示中文字符(在mac上编译opencv及contrib库)
    OpenProject基础使用介绍
    负载均衡
    如何搭建wordpress ,wecenter
    nginx 模块
    Nginx
    http 协议
    ssh
  • 原文地址:https://www.cnblogs.com/coolSome/p/11010344.html
Copyright © 2011-2022 走看看