无奈的页面通信

为了与stf页面通信,今天扣扣索索写了这个坑爹的代码,感觉超级费劲啊

define([], function () {

    var Ken = {};
    var debug = function(v){console.info(v)};

    var checkis = !!window.postMessage;
    var inited = false;

    // 定义通道信息
    var channels  = {};

    // 定义ping命令的序列集
    var pings = {};

    Ken.init = function()
    {
        // 防止重复调用
        if (inited) return;

        inited = true;
        if ( !checkis )
        {
            alert("您的浏览器当前不支持此功能");
            return;
        }

        console.log('jsbridge init ...')

        // 绑定消息接收器
        if(window.addEventListener)
        {
            window.addEventListener('message', onRecieveMessage, false);
        }
        else
        {
            window.attachEvent('message', onRecieveMessage, false);
        }
    }

    Ken.createChannel = function(channelName, settings)
    {
        var defaults = {
            winId: false,
            isIframe: true,
            targetOrigin: '*',
            ping: false,
            onRecieveMessage: function(message)
                {
                    console.log('wahaha: ', $.toJSON(message));
                }
        }

        channels[ channelName ] = $.extend(defaults, settings);

        console.log('bind channel:', channelName, channels[ channelName ]);
    }

    Ken.sendMessage = function(channelName, data)
    {
        if (!inited)
        {
            alert('Please init jsbridge');
            return;
        }

        if ( !checkis )
        {
            console.log('Un support sendMessage in:', channelName, data);
            return;
        }

        var channel = channels[ channelName ];

        if (!channel)
        {
            //alert('Un define channel: ', channelName);
            console.log('Un define channel: ', channelName);
            return;
        }

        var winDom = document.getElementById(channel.winId);

        if (!winDom)
        {
            console.log('Cannot find element: ', channel.winId);
            return;
        }

        var rawData = $.toJSON({channel: channelName,message: data});

        console.log('sendMessage to ' + channelName, rawData);
        
        try
        {
            if (channel.isIframe)
            {
                winDom.contentWindow.postMessage(rawData, channel.targetOrigin);
            }
            else
            {
                winDom.postMessage(rawData, channel.targetOrigin);
            }           
        }
        catch(e)
        {
            console.log('sendMessage has error: ', e);
            return;
        }
    }

    Ken.ping = function(channelName, success, failed)
    {
        var channel = channels[ channelName ];

        if (!channel)
        {
            //alert('Un define channel: ', channelName);
            console.log('Un define channel: ', channelName);
            return;
        }

        // 轮询 ping 目标通道
        if (!channel.ping)
        {
            var funcName = 'ping' + channelName;

            if (!pings[channelName])
            {
                $.jsbridge[funcName] = function(){
                    Ken.sendMessage(channelName, 'ping');
                }
            }

            var intervalCode = "$.jsbridge." + funcName + "()";

            pings[channelName] = {
                intervalCode: intervalCode,
                intervalName: false,
                success: success
            };

            // 加定时器
            pings[channelName]['intervalName'] = window.setInterval(intervalCode,1500);
        }
    }

    function onRecieveMessage(event) {
        // console.log('listen messageEvent:', event);
        var data = null;
        try {
            data = $.parseJSON(event.data);
        } catch (e) {}

        if (data && data.channel)
        {
            var channelName = data.channel;
            var channel = channels[ channelName ];

            if (!channel)
            {
                console.log('Un define channel: ', channelName);
                return;
            }

            // 如果有数据响应,则认为对方服务是可用的
            channels[ channelName ].ping = true;
            if (pings[channelName])
            {
                var intervalName = pings[channelName].intervalName;

                try{                    
                    window.clearInterval(intervalName);
                    pings[channelName].success();
                    pings[channelName] = false;
                }catch(e){}
            }

            console.log(channelName + ' onRecieveMessage: ', data.message);

            return channel.onRecieveMessage(data.message);
        }
    }

    $.jsbridge = {};

    return Ken;
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,956评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 今天收到一个朋友A的微信:被那个妹子盯上了··。而其实是他先勾搭人家妹子,证明了自己的男性吸引力后觉得对自己没有挑...
    六眼阅读 343评论 0 0
  • 无获的羔羊在六月里茁壮成长 地上洒满你的背影 春天燃烧殆尽 有我窃笑在云端 想给喧闹的飞龙 喧闹的一击 夜晚里露珠...
    一个兰尼斯特阅读 96评论 0 0
  • 东京电影节获奖名单 (1985年) 奖项 获奖电影 获奖者 大奖 台风俱乐部 评委会大奖 雅克与十一月 评委会大奖...
    123逍遥游阅读 25,317评论 0 1