前端iframe子页面与父页面通信问题

最新推荐文章于 2025-01-10 11:50:28 发布

原创最新推荐文章于 2025-01-10 11:50:28 发布 · 645 阅读

CC 4.0 BY-SA版权

本文探讨了如何在前端实现iframe子页面与父页面之间的通信，包括简单的通过`window.parent`进行通信的方法。同时，针对复杂的拖放交互需求，利用HTML5的drag and drop API来实现跨iframe的drag功能，这是file协议下无法实现的功能，必须在服务器环境下运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个index.html,一个iframe.html,但是要注意，html文件必须放到服务器下访问，file协议下无法生效的。

1.普通需求：只需要子页面获取父页面元素

window.parent或者参考window.iframe用法，比较简单

2.霸气需求，drag拖动跨ifame（老式的mousedown + mousemove + mouseup模拟的drag事件无法实现）

这里借助HTML5中的drag and drop API

index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="/pfl/vendor/jquery.min.js"></script>
    <style>
    .trash{
        padding: 10px;
        height: 100px;
        background: #BCDAFA;
        border: 2px solid #8C96FF;
        font-size: 60px;
        line-height: 100px;
    }
    .trash.hover{
        background: #FFFFAB;
        border: 2px dashed red;
        color: red;
    }
    #iframe{width:100%;height:450px;}
    </style>
</head>
<body>
    <div id="trash" class="trash">我是垃圾箱啦啦啦</div>
    <iframe src="/pfl/mysql/dragson" frameborder="0" id="iframe"></iframe>
    <script type="text/javascript">
    $(function(){
        iframeWindow = $('#iframe')[0].contentWindow; //获取子页面的window
 
        $("#trash").on("dragenter",function(ev){
            if(iframeWindow.isCrossIFrameDragging) {
                $(ev.target).addClass("hover").text("别犹豫了赶紧扔了吧");
            }
        })
        .on('dragleave', function(ev) {
            if(iframeWindow.isCrossIFrameDragging) {
                $(ev.target).removeClass('hover').text("我是垃圾箱啦啦啦");
            }
        })
        .on("dragover",function(ev){
            if(iframeWindow.isCrossIFrameDragging) {
                ev.preventDefault();
                ev.originalEvent.dataTransfer.dropEffect = 'move';
            }
        })
        .on("drop",function(ev){
            var df = ev.originalEvent.dataTransfer;
            var data = df.getData("Text");
//dataTransfer.getData(format)：获取DataTransfer对象中设置format格式的数据。其中format代表数据格式，data代表数据。
            if(iframeWindow.isCrossIFrameDragging)  {
                var id = data.match(/^cross_iframe_drag_([0-9]+)$/)[1];
//  '/是正则开始结束的定界符，^是匹配输入字符串的开始位置，（）标记一个子表达式的开始和结束位置,+是匹配一次或多次'
                $(ev.target).removeClass('hover').text("丢掉了["+id+"],好样的,继续！");
                iframeWindow.removeDraggingItem();
            }
        });
    });
    </script>
</body>
</html>

iframe.html
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
        body{background: #C2FFB3;}
        .item-list{
            list-style: none;
            padding:0;
        }
        .item-list li{
            line-height: 50px;
            width:50px;
            background: #FFDECF;
            text-align: center;
            margin-top: 10px;
            border: 2px solid #525252;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <span>这里是iframe内部啦，拖拽一下试试看</span>
    <ul class="item-list" id="items">
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
        <li draggable="true">5</li>
        <li draggable="true">6</li>
    </ul>
    <script>
    $(function(){
        $("#items").find("li").on("dragstart",function(ev){//"dragstart"当用户开始拖动元素或文本选择时触发。
            var dt = ev.originalEvent.dataTransfer;//类似定义了一个dataTransfer对象
            dt.setData('Text','cross_iframe_drag_'+$(this).text());
//dataTransfer的setData方法，这边类似'cross_iframe_drag_大数据Hue'
            dt.effectAllowed = 'move';//属性指定拖放操作所允许的一个效果，move：一个项目可被移动到新位置。
            window.isCrossIFrameDragging = true;
            window.draggingItem = this;
        }).on("dragend",function(ev){
            window.isCrossIFrameDragging = false;
        });
 
        window.removeDraggingItem = function(){
            $(window.draggingItem).animate({height:0,opacity:0},1000,function(){
                $(this).remove();
            });
            window.draggingItem = null;
        };
    });
    </script>
</body>
</html>