jQuery - 動態建立iframe並加載頁面

時間 2019-12-05

原文原文鏈接

使用jQuery能夠方便的建立html對象。下面例子是經過傳入的url和寬度高度，動態的在頁面中央建立一個iframe並加載內容。同時在iframe後面還會添加一個灰色的遮罩，點擊遮罩即可以移除iframe和遮罩。javascript

代碼以下：

 
        <html> 
       
        <head> 
       
        <script language= 
        "JavaScript"  
        src= 
        "jquery-1.11.1.min.js"  
        type= 
        "text/javascript" 
        ></script> 
       
        <script language= 
        "JavaScript"  
        type= 
        "text/JavaScript" 
        > 
       
        /** 
       
        彈出iframe頁面(iframe後面會添加灰色蒙版) 
       
        **/ 
       
        function  
        showIframe(url,w,h){ 
       
        //添加iframe 
       
        var  
        if_w = w;  
       
        var  
        if_h = h;  
       
        //allowTransparency='true' 設置背景透明 
       
        $( 
        "<iframe width='"  
        + if_w +  
        "' height='"  
        + if_h +  
        "' id='YuFrame1' name='YuFrame1' style='position:absolute;z-index:4;'  frameborder='no' marginheight='0' marginwidth='0' allowTransparency='true'></iframe>" 
        ).prependTo( 
        'body' 
        );     
       
        var  
        st=document.documentElement.scrollTop|| document.body.scrollTop; 
        //滾動條距頂部的距離 
       
        var  
        sl=document.documentElement.scrollLeft|| document.body.scrollLeft; 
        //滾動條距左邊的距離 
       
        var  
        ch=document.documentElement.clientHeight; 
        //屏幕的高度 
       
        var  
        cw=document.documentElement.clientWidth; 
        //屏幕的寬度 
       
        var  
        objH=$( 
        "#YuFrame1" 
        ).height(); 
        //浮動對象的高度 
       
        var  
        objW=$( 
        "#YuFrame1" 
        ).width(); 
        //浮動對象的寬度 
       
        var  
        objT=Number(st)+(Number(ch)-Number(objH))/2; 
       
        var  
        objL=Number(sl)+(Number(cw)-Number(objW))/2; 
       
        $( 
        "#YuFrame1" 
        ).css( 
        'left' 
        ,objL); 
       
        $( 
        "#YuFrame1" 
        ).css( 
        'top' 
        ,objT); 
       
        $( 
        "#YuFrame1" 
        ).attr( 
        "src" 
        , url) 
       
        //添加背景遮罩 
       
        $( 
        "<div id='YuFrame1Bg' style='display:block;z-index:3;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>" 
        ).prependTo( 
        'body' 
        );  
       
        var  
        bgWidth = Math.max($( 
        "body" 
        ).width(),cw); 
       
        var  
        bgHeight = Math.max($( 
        "body" 
        ).height(),ch); 
       
        $( 
        "#YuFrame1Bg" 
        ).css({width:bgWidth,height:bgHeight}); 
       
        //點擊背景遮罩移除iframe和背景 
       
        $( 
        "#YuFrame1Bg" 
        ).click( 
        function 
        () { 
       
        $( 
        "#YuFrame1" 
        ).remove(); 
       
        $( 
        "#YuFrame1Bg" 
        ).remove(); 
       
        }); 
       
        } 
       
        </script> 
       
        </head> 
       
        <body> 
       
        <input type= 
        "button"  
        onClick= 
        "showIframe('http://hangge.com',460,280)"  
        value= 
        "加載" 
        /> 
       
        </body> 
       
        <html>