源码侠

html中引入另一个html文件的方法

󰌂发布时间 2024-04-18 热度 476

 当前位置:  首页 / 教程资源 / 前端教程

教程内容:

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)条

    源码侠

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

    源码侠提供各类虚拟产品,虚拟资源以及教程、模板、素材等,源码侠是一个互联网虚拟产品,虚拟资源聚集地的特色网站!

    反馈建议

    kefu@xuniku.cn fuwu@xuniku.cn

    周一至周日9:00-23:00

    在线QQ咨询

    本期用户推荐小程序

    本站所有资源均为会员提供或网上搜集,版权归原作者所有,如需商业用途或转载请与原作者联系!所提供的内容仅供观摩学习交流之用,请勿用作商业用途!如有侵权,请及时 联系我们 删除

    Powered by 源码侠 © 2010-2020 流量联盟   copyright   北京流量圈信息科技有限公司