如何在HTML标签内嵌入一个HTML页面

朴灿烈づ我的快乐病毒、 2023-06-27 03:51 17阅读 0赞

关于iframe标签用法就不提了，现在很少人用了吧。  
直接js实现很舒服，用异步请求的方法加载为标签内添加内容，  
看代码吧：

//为header标签中加载header.html页面
    //通过向header.html页面发出请求，将其所有内容返回，添加到标签内
    $(function () { 
        $.get("header.html",function (data) { 
            $("#header").html(data);
        });
    });

header.html页面的代码：

//可见直接写你想嵌入的代码即可，不用‘头文件’
    <header id="header">
            <div class="top_banner">
                <img src="images/top_banner.jpg" alt="">
            </div>
            <div class="shortcut">
                
                <div class="login_out">
                    <a href="login.html">登录</a>
                    <a href="register.html">注册</a>
                </div>
                
                <div class="login">
                	
                    <span id="span_username"></span>
                    <a href="myfavorite.html" class="collection">我的收藏</a>
                    <a href="javascript:location.href='exitServlet';">退出</a>
                </div>
            </div>
            <div class="header_wrap">
                <div class="topbar">
                    <div class="logo">
                        <a href="/"><img src="images/logo.jpg" alt=""></a>
                    </div>
                    <div class="search">
                        <input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                        <a href="javascript:;" class="search-button">搜索</a>
                    </div>
                    <div class="hottel">
                        <div class="hot_pic">
                            <img src="images/hot_tel.jpg" alt="">
                        </div>
                        <div class="hot_tel">
                            <p class="hot_time">客服热线(9:00-6:00)</p>
                            <p class="hot_num">400-618-9090</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
         
        <div class="navitem">
            <ul class="nav">
                <li class="nav-active"><a href="index.html">首页</a></li>
                <li><a href="route_list.html">门票</a></li>
                <li><a href="route_list.html">酒店</a></li>
                <li><a href="route_list.html">香港车票</a></li>
                <li><a href="route_list.html">出境游</a></li>
                <li><a href="route_list.html">国内游</a></li>
                <li><a href="route_list.html">港澳游</a></li>
                <li><a href="route_list.html">抱团定制</a></li>
                <li><a href="route_list.html">全球自由行</a></li>
                <li><a href="favoriterank.html">收藏排行榜</a></li>
            </ul>
        </div>