• ifream 跨域实现高度自适应


    情景:

      a.xx.com中有一个ifream,ifream的id为 main_ifream. ifream中嵌入页面 b.xx.com/1.html

    解决方案:

      1、在b.xx.com/1.html中嵌入js,向a.xx.com发送window.message, 消息信息中包含页面b.xx.com/1.html的高度

      2、在a.xx.com中接收从b.xx.com消息的高度,设置ifream的高度。

    源代码:

      1、b.xx.com中嵌入发送消息js

      

    var crossDomainHeightJS = {
        CROSS_DOMAIN: "*",
        CURRENT_CALLBACK: null,
        SCROLL_TOP_VAL: 0,
        init: function() {
            setInterval(function() {
                crossDomainHeightJS.initHeight();
            }, 500);
        },
        initHeight: function() {
            try {
                var bodyHeight = document.body.scrollHeight || window.document.body.scrollHeight;
                var docHeight = document.documentElement.scrollHeight || window.document.documentElement.scrollHeight;
                var height = Math.min(bodyHeight, docHeight);
                window.parent && window.parent.postMessage && window.parent.postMessage(JSON.stringify({height: height}), crossDomainHeightJS.CROSS_DOMAIN)
            } catch (e) {
                console.log(e);
            }
        }
    };
    crossDomainHeightJS.init();

      2、a.xx.com中接收消息,设置ifream的高度

      

    //监听事件来源
            window.addEventListener("message", function (e) {
                routEvent(e);
            }, false);
            //跨域事件路由
            var routEvent = function (event) {
                try {
                    if (event) {
                        var origin = event.origin;
                        if (origin.indexOf(".xx.com") == origin.length - 7) {
                            var param = event.data;
                            var data = JSON.parse(param);
                            for (var key in data) {
                                if (key == "height") {
                                    $("#main_iframe").attr("height", data[key]);
                                    break;
                                }
                            }
                        }
                    }
                }catch (e) {
                    console.log(e)
                }
            };

    说明:origin.indexOf(".xx.com") == origin.length - 7,校验是否都是来自xx.com的消息。如果两个页面不是相同域名,是否可以去掉?暂时没有尝试,后面可以试一下

      

  • 相关阅读:
    如何判断单链表是否存在环
    语法面试等题目汇总
    数据分析师常见的10道面试题解答
    Python 的函数
    Python 的错误和异常处理
    Python 的条件语句和循环语句
    Python 的基本运算和内置函数
    Python 的数据表示
    Python 基础
    关于 Python
  • 原文地址:https://www.cnblogs.com/liuwt365/p/8462206.html
Copyright © 2020-2023  润新知