站长图库

手把手教你在html中引入另一个html文件的方法(详解)

 发布时间 2020-06-30 13:41:04 热度 95

 Tag标签:  html引入html文件

手把手教你在html中引入另一个html文件的方法(详解)


html中引入调用另一个html的方法,尝试了好几种,都列出来:

其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目

一、p+$(“#page1”).load(“b.html”)

参考代码:

<body>
    <p id="page1"></p>
    <p id="page2"></p>
    <script>
        $("#page1").load("page/Page_1.html");
        $("#page2").load("page/Page_2.html");
    </script>
</body>

二、iframe

参考代码:

<head></head>
<body>
    <p id="page1">
        <iframe align="center" width="100%" height="170" src="page/Page_1.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </p>
    <p id="page2">
        <iframe align="center" width="100%" height="170" src="page/Page_2.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </p>
</body>

三、object引入

参考代码:

<head>
    <object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150></object>
</head>

四、import引入

参考代码:

<head>
    <link rel="import" href="page/Page_1.html" id="page1"></head><body>
    <script>
        console.log(page1.import.body.innerHTML);
    </script>
</body>

五、bootstrap的panel组件,或者easyui的window组件,有点类似这个效果.


感谢大家的阅读,希望大家收益多多。




评论(0)条

    站长图库

    站长素材 - 建站资源分享平台

    猜你喜欢
    Unicorn Admin 一款黑色扁平化后台模板

    Unicorn Admin 一款黑色扁平化后台模板

    其他系统 3644 2017-10-17

    Unicorn - Admin Template 是一款支持视网膜屏幕、完全响应式布局,可用于任何应用程序的管理模板。该...

    PHP协议监控微博红包码商系统 码商代理系统无需监控回调

    PHP协议监控微博红包码商系统 码商代理系统无需监控回调

    其他源码 327 2019-12-17

    PHP协议监控微博红包码商系统 码商代理系统无需监控回调12-2号优化了领包速度12-2号优化了回调验证12-2号优化了...

    每日返利分红平台整站源码 8级分销资金盘防黑版带商城系统源码+详细安装教程

    每日返利分红平台整站源码 8级分销资金盘防黑版带商城系统源码+详细安装教程

    其他源码 860 2019-05-22

    理财分红每日返利系统,资金盘投资金融8级分销源码,带转账、支付、提现、推广、会员升级等功能的投资理财平台开源源码带购物商...

    后台管理系统模板设计PSD源文件素材下载

    后台管理系统模板设计PSD源文件素材下载

    网页模板 185 2020-01-25

    后台管理系统模板设计PSD源文件素材,适用于信息系统后台管理界面设计使用。