cc百川
cc百川

前端跨域通信--【iframe上篇】

需求：
在内部的业务中，通过iframe引用了外部业务，当执行外部业务是，内部业务停止或禁用（仅可查看模式）,这里外部业务执行完毕会发出通知，这里我们需要依据这个通知进行处理内部业务，例如提交等。
原型图：
前端跨域通信--【iframe上篇】_第1张图片

文章目录

  • 采坑
    • iframe 后续内容（元素，js，css等）不显示
  • 主域相同：子域不同domain设置同源
    • 实现
    • 效果：如下
  • 主域不同：通过postMessage进行通信
    • 实现
    • 效果：如下
  • 这里是代码【可以忽略】
    • oa.html
    • qiyuesuo.html

采坑

iframe 后续内容（元素，js，css等）不显示

使用iframe标签需使用双标签闭合

也许你需要的是这样的页面：
前端跨域通信--【iframe上篇】_第2张图片
采坑注意：
前端跨域通信--【iframe上篇】_第3张图片
这里简直怀疑人生了，这点代码，这么点逻辑都不行，网上说只要吧js部分放到irame之前即可【这样只是处理了js部分，那么剩余的元素内容则处理不了】我们只需要记住，iframe必须使用双标签闭合

主域相同：子域不同domain设置同源

实现

前端跨域通信--【iframe上篇】_第4张图片

效果：如下

前端跨域通信--【iframe上篇】_第5张图片

主域不同：通过postMessage进行通信

实现

前端跨域通信--【iframe上篇】_第6张图片

效果：如下

前端跨域通信--【iframe上篇】_第7张图片

这里是代码【可以忽略】

oa.html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>OA的业务页面</title>
</head>
<body>
<div id="oa" style="text-align: center">
    <div>OA的业务页面</div>
    <button class="oa_btn" onclick="sendmsg()">执行oa某业务</button>
    <button class="oa_btn" onclick="sendmsg()">执行oa某业务</button>
</div>
<div>
    <iframe id="OA_TO_QIYUESUO" name="OA_TO_QIYUESUO"
            height="50%" width="100%" src="http://127.0.0.1:8080/docs/qiyuesuo.html"></iframe>
    <div style="text-align: center; border: 1px solid red">测试内容</div>
</div>
<script type="text/javascript">

    window.addEventListener('message', function (e) {
        console.log('接收来自契约锁的消息', e.data);
        //接收消息
    }, false);


    var iframe = document.getElementById('OA_TO_QIYUESUO');
    iframe.onload = function () {
        var data = {mes: 'OA已经成功加载了你的内容。', backmsg: "请记住我的地址是" + location.origin};
        // 向契约锁传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://127.0.0.1:8080');
    };

    function sendmsg() {
        var data = {mes: 'OA点击事件。'};
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://127.0.0.1:8080');
    }

   /* document.domain = '127.0.0.1';
    var iframe = window.frames["OA_TO_QIYUESUO"];
    iframe.onload = function () {    console.log("加载结束")   }

    function sendmsg() {   console.log("正在执行某业务")   }

    function setLoading(loading) {
        loading = loading || false;
        var btns = document.getElementsByClassName("oa_btn");
        for (var i = 0; i < btns.length; i++) {
            var btn = btns[i];
            if (loading) {
                btn.setAttribute("disabled", "true");
            } else {
                btn.removeAttribute("disabled")
            }
        }
    }*/
</script>
</body>
</html>

qiyuesuo.html

<html>
<head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>契约锁签章的业务页面</title>
    <meta name="author" content="Remy Maucherat">
</head>
<body>
    <div style="text-align: center">
        <h1>契约锁签章的业务页面</h1>
        <div>好大一个章</div>
        <button onclick="testsubmit()">测试提交</button>
    </div>
    <script type="text/javascript">
        function testsubmit() {
            window.parent.postMessage(JSON.stringify({"mes":"ok"}), 'http://127.0.0.1:8082');
        }
        if (window.addEventListener) {
            window.addEventListener('message', function(e){sendmsg(e)}, false);
        } else {
            window.attachEvent('message', function(e){sendmsg(e)});
        }
        function sendmsg (e) {
            console.log("接收来自oa的消息", e.data);
        }

        /*document.domain = '127.0.0.1';
        function f() {
            console.log(12345679)
        }
        function testsubmit() {
            //给OA发送准备盖章中
            window.parent.setLoading(true)

            window.setTimeout(function(){
            //给OA说我已经盖完章了
                console.log("盖章完成")
                window.parent.setLoading(false)
            }, 1000)
        }*/
    </script>
</body>
</html>

本次主要采坑是关于iframe的使用方法。
以上仅个人学习总结：具体实践为主

你可能感兴趣的:(web前端)