フロントエンドiframeサブページと親ページの通信の問題

4228 ワード
index.html、iframe.htmlですが、htmlファイルはサーバの下に置いてアクセスする必要があります.fileプロトコルでは有効になりません.
1.一般的な要件:親ページ要素を取得するには、サブページのみが必要です.
window.parentまたはwindowを参照してください.iframeの使い方は、比較的簡単です
2.覇気需要、dragドラッグifame(旧式のmousedown+mousemove+mouseupシミュレーションのdragイベントは実現できない)
ここではHTML 5のdrag and drop APIを利用して
index.html



    
    
    <script type="text/javascript" src="/pfl/vendor/jquery.min.js"/>
    <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>


    <div id="trash" class="trash">        </div>
    <iframe src="/pfl/mysql/dragson" frameborder="0" id="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>

</code></pre> 
  <pre><code>iframe.html



    <meta charset="UTF-8"/>
    <title>iframe
    
    


       iframe   ，       
    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
    

    
    $(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;
        };
    });

MbUnit
MySQLスローログの分析