html调用其他网页内容

﹏ヽ暗。殇╰゛Y 2023-03-05 09:37 15阅读 0赞

文章目录

  • 说明
  • 定义一个html功能模块
  • 调用html的功能模块

说明

在a网页里调用b网页的内容,比如 我们需要在b.html,c.html…网页中写同一个功能,此时我们就可以用a.html写好该功能,然后在b和c中调用a的功能即可!

定义一个html功能模块

为了展示 我就以一个时间模块为例,功能模块随便写 动态的也可以的!
(我用的工具是pycharm)
在这里插入图片描述
time中是如下代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JS时间</title>
  6. <meta http-equiv="Contnt-Type" mrc="text/html; charset=gb2312">
  7. </head>
  8. <body>
  9. <!- 整个页面内容都是js时间 ->
  10. <div id="linkweb">
  11. </div>
  12. <script>setInterval("linkweb.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
  13. </script>
  14. </body>
  15. </html>

执行该html显示页面就是一个动态时间:
20200804165114923.png

调用html的功能模块

调用html模块代码(其实就是iframe,需要了解更多直接百度iframe),下面代码需要更改的就是src的内容,src的内容就是需要调用html的名称:

  1. <div id="page1">
  2. <iframe align="center" width="100%" height="555" src="time.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  3. </div>

这里在index.html中调用time.html中的功能,全部代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>test</title>
  6. </head>
  7. <body>
  8. <div id="page1">
  9. <iframe align="center" width="100%" height="555" src="time.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
  10. </div>
  11. </body>
  12. </html>

在这里插入图片描述
执行index.html就可以看到调用的time.html中的内容了!
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,15人围观)

还没有评论,来说两句吧...

相关阅读