iframe 内联加载

梦里梦外; 2023-09-26 17:19 107阅读 0赞

简介：

iframe 内联加载 ，通过iframe特性，加载网页到当前网页中

<div class="panel panel-default">
        <div class="panel-body">
    
            <div class="form-group" style="margin-top: 10px;">
                <h4 style="text-align: center;">加载数据展示</h4>
            </div>
            
            <div  id="loading" style="display: none;text-align: center;position: absolute;margin-top: 20%;margin-left: 45%;">
                <img src="./img/loading.gif">
            </div>
            <div id ="dataBox" style="display: none;border: solid 1px;height: auto;">
                <input type="hidden" id="documentNum" >
                <iframe name="iframename" id="iframeId" marginwidth=10 marginheight=10 src="" frameborder=no width="100%" height="580px;" onload="reinitIframe()"></iframe>
            </div>
    
        </div>
    </div>
    <script>
        /***************************** 初始化 **************************/
        $(function () {
            init();
        });
    
        function init() {
            window.setInterval(function () {
                queryDataInit();
            }, 1 * 1000);
        }
    
        /**
         * 获取扫描数据
         */
        function queryDataInit(){
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "xxx/xxx/xxx",
                success: function (data) {
                    if (data!=""){
                        // debugger;
                        console.log("-----> Scan Data is :"+ JSON.stringify(data));
    
                        if(data==null){
                            toastr.warning('当前无数据');
                            return;
                        }
                        if (data.documentNum == $(documentNum).val()) {
                            return;
                        } else {
                            $('#loading').show();
                            $('#dataBox').hide();
                            $(documentNum).val(data.documentNum);
                            $("iframe").attr("src", data.endOpenUrl);
                        }
    
                    }
                }
            })
        }
        function reinitIframe(){
            console.log("数据加载成功....");
            $('#loading').hide();
            $('#dataBox').show();
        }
    </script>