js实现一个html页面引入另一个html页面

最新推荐文章于 2024-04-22 16:01:14 发布

haogemr

最新推荐文章于 2024-04-22 16:01:14 发布

阅读量3.3w

点赞数 20

分类专栏：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/document_dom/article/details/89851488

版权

前端专栏收录该内容

56 篇文章 1 订阅

订阅专栏

通过jq的load方法引入

<body>
    <div id="div"></div>
    <script>
          $("#div").load("index.html");
    </script>
</body>

原生js的object标签引入

<body>
    <div id="div"></div>
    <script>
          document.getElementById("div").innerHTML = '<object type="text/html" data="index.html" width="100%" height="100%"></object>';
    </script>
</body>

iframe引入

<body>
   <div id="div">
        <iframe align="center" width="100%" height="200" src="index.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
   </div>
 </body>

import引入(head中引入文件，script中加载内容)

href链接引入的html文件，id可以看做页面引导，在script中用到
注意：需要在服务器环境下，否则会报跨域错误

<head>
    <meta charset="utf-8" />
    <title>主页面</title>
    <!--import引入-->
    <link rel="import" href="top.html" id="page1"/>
    <link rel="import" href="fotter.html" id="page2"/>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>

<script type="text/javascript">
    document.getElementById("div1").innerHTML = page1.import.body.innerHTML;
    document.getElementById("div2").innerHTML = page2.import.body.innerHTML;
</script>

关注

20
点赞
踩
41

收藏

觉得还不错? 一键收藏
5
评论
js实现一个html页面引入另一个html页面

通过jq的load方法引入原生js的object标签引入iframe引入import引入(head中引入文件，script中加载内容)通过jq的load方法引入<body> <div id="div"></div> <script> $("#div").load("index.html"); <...
复制链接

扫一扫

专栏目录

haogemr CSDN认证博客专家 CSDN认证企业博客

码龄6年

86: 原创

5万+: 周排名

1万+: 总排名

40万+: 访问

: 等级

3448: 积分

69: 粉丝

167: 获赞

35: 评论

621: 收藏

私信

关注

热门文章

分类专栏

前端 56篇
转载 19篇

最新评论

滚动翻页效果
z4253467: 大佬有问题请教能方便聊一下吗
git 关于本地分支和远程分支的创建、切换、合并和删除
程序员 Hasity: 你的远程分支呢，没有不要乱打标签好吧
HTML5 常用事件
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 职场解惑讨论会: https://activity.csdn.net/creatActivity?id=10427?utm_source=csdn_ai_ada_redpacket 可持续能源技术真的能改变世界吗？: https://activity.csdn.net/creatActivity?id=10425?utm_source=csdn_ai_ada_redpacket 无效数据，你会怎么处理？: https://activity.csdn.net/creatActivity?id=10423?utm_source=csdn_ai_ada_redpacket 物联网技术正在如何影响我们的生活: https://activity.csdn.net/creatActivity?id=10421?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket
git切换到别的分支,暂时保存当前分支的修改(不进行add 和commit)的方法 git stash
CSDN-Ada助手: IDEA的布局方式也在和VSCode学，你觉的这说明了什么？简洁的力量？
利用 node Express 框架实现get,post请求的前后端交互
haogemr: 你觉得呢

大家在看

最新文章

目录

评论 5

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。