layui tab控件中载入外部html页面

最新推荐文章于 2022-12-04 19:23:59 发布

转载最新推荐文章于 2022-12-04 19:23:59 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jhxk/articles/9628135.html

文章标签：

#javascript #ViewUI

目前，潜入外部网页的方式，主要有3种：

iframe方式

<div><iframe src="xxx.jsp"></iframe>
ajax方式

<div id=“externalHtml"></div>

ajax加载数据后，直接赋予 externalHtml.innerHTML 即可。
script脚本方式

<div><script src="xxx.js" type="text/javascript"></script></div>

第一种方式的示例:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tab</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">抽奖明细</li>
            <li>抽奖统计</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe scrolling="no" id="main1" name="main" frameborder="0" src="/Admin/AwardRecord/" style="width:100%;"></iframe>
            </div>
            <div class="layui-tab-item">
                <iframe scrolling="no" id="main2" name="main" frameborder="0" src="/Admin/AwardStat/" style="width:100%;"></iframe>
            </div>
        </div>
    </div>

</body>
</html>
<script src="~/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });


    // 计算页面的实际高度，iframe自适应会用到
    function calcPageHeight(doc) {
        var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
        var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
        var height = Math.max(cHeight, sHeight);
        return height;
    }


    function iframeInit(id) {
        //根据ID获取iframe对象
        var ifr = document.getElementById(id);
        ifr.onload = function () {
            //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
            ifr.style.height = '0px';
            var iDoc = ifr.contentDocument || ifr.document;
            var height = calcPageHeight(iDoc);
            if (height < 850) {
                height = 850;
            }
            ifr.style.height = height + 'px';
        };
    }


    $(function () {
        iframeInit('main2');
        iframeInit('main1');
    });

</script>

转载于:https://www.cnblogs.com/jhxk/articles/9628135.html