Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >用javascript加载HTML文件

问用javascript加载HTML文件
EN

Stack Overflow用户

提问于 2021-01-15 16:13:22

回答 1查看 50关注 0票数 0

我需要将HTML文件的内容加载到div中。

我用下面的javascript代码来做这件事

function scroll_down() {
  var div = $('#div_name');
  $.get('html_file_to_load.html', function(data) { 
      div.html(data);
      $('body, html').scrollTop(div[0].scrollHeight);
  })
}

该函数加载html_file_to_load.html文件，将内容添加到div，然后向下滚动页面。问题是HTML文件可能包含一些图片

示例< img src='picture.jpg' >

在这种情况下，在加载HTML代码后，滚动条被设置到底部，浏览器加载图片，页面的垂直高度增加！

我需要添加一个检查:在执行scrollTop(div.scrollHeight)之前，浏览器必须等到最终包含在其中的HTML文件和图片文件都加载完毕；

我该怎么做呢？

EN

回答 1

Stack Overflow用户

发布于 2021-01-15 16:32:44

您可以将事件侦听器添加到图像中，并在加载时强制其滚动

function forceScroll(elem) {
  $('body, html').scrollTop(elem.scrollHeight);
}

function scroll_down() {
  var div = $('#div_name');
  $.get('html_file_to_load.html', function(data) {
      var html = $(data);
      var imgs = html.find("img");
      imgs.each(function() {
        $(this).on("load", function() {
          forceScroll(div[0]);
        });
      });
      div.append(html);
      forceScroll(div[0]);
    }
  });
}

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65739577

复制

相关文章

用JavaScript来加载css、js文件

javascript css document url var

友儿

2023/10/21

3270

JavaScript文件加载优化

企鹅号小编

2018/01/04

1.3K0

用JavaScript实现HTML转义

html 正则表达式

使用正则表达式的方式实现HTML转义 var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g; func

大师级码师

2021/10/27

1.5K0

Javascript文件加载：LABjs和RequireJS

传统上，加载Javascript文件都是使用<script>标签。就像下面这样：　　<script type="text/javascript" src="example.js"></scrip

ruanyf

2018/04/12

1.4K0

Javascript文件加载：LABjs和RequireJS

Javascript文件加载 ——LABjs和RequireJS

java javascript 编程算法

<script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重的缺陷。

javascript.shop

2019/09/04

1K0

Javascript文件加载 ——LABjs和RequireJS

【说站】javascript如何动态加载js文件

java 文件存储 javascript

2、通过xhr方式加载js文件，不过通过这种方式的话，就可能会面临着跨域的问题。

很酷的站长

2022/11/23

7.3K0

【说站】javascript如何动态加载js文件

javascript中html当中如何引用css文件

1.html当中如何引用css文件马克-to-win：css：Cascading Style Sheets 例 1.1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>  <link href="outer.css" rel="stylesheet"> </head> <body> <table width="190" height="80" border="2" > <tr> <td >张三</td> </tr> <tr> <td>qixy</td> </tr> <tr> <td>李四</td> </tr> <tr> <td>王五</td> </tr> </table> </body> </html> outer.css： table { background-color: #0000ff; } td { /*the following statement make the border to show, because of the different color.*/ background-color: #FF0000; }

马克java社区

2019/11/26

2.4K0

javascript中html当中如何引用css文件

如何将 JavaScript 文件引入到 HTML

网站 html javascript css

JavaScript，也缩写为 JS，是一种用于 Web 开发的编程语言。作为与 HTML 和 CSS 一起使用的 Web 核心技术之一，JavaScript 用于使网页具有交互性并构建 Web 应用程序。遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript，无需额外的插件。

梦溪

2021/09/08

12.3K1

HTML加载顺序

html css 网站

完成了若干个基于WEB的项目, 也了解了从前端的js,css,html到后端python/php等, 二者如何交互, 最终浏览器如何执行, 这些在心里也已经很明确了. 不过一个问题一直萦绕在心中,那就是:

用户7657330

2020/08/14

1.9K0

JavaScript SheetJS将 Html 表转换为 Excel 文件

java javascript html https 网络安全

在本教程中，我们可以在客户端从我们的 HTML 表数据创建一个 excel 文件。即使用javascript将HTML 表导出到Excel (.xlsx)。

全栈程序员站长

2022/09/09

5.5K0

JavaScript HTML DOM - 改变 HTML

javascript html

今天的日期是： Mon Jul 19 2021 15:52:44 GMT+0800 (中国标准时间)

陈不成i

2021/07/20

4.3K0

JavaScript加载速度

解决JS加载速度慢的问题传统形式加载js文件 <script type="text/javascript" src="js调用地址"></script> 高速加载js文件 <script type="text/javascript"> /* 请不要删除这段代码，因为这段代码起到了加速JS加载作用 */ document.write("<scr"+"ipt src=\"你的js调用地址"></sc"+"ript>"); </script>

闲花手札

2021/08/24

7510

IE下用JavaScript将HTML导出为Word、Pdf

html javascript

高爽

2017/12/28

1.9K0

IE下用JavaScript将HTML导出为Word、Pdf

go : gin 加载html

本文介绍使用 LoadHTMLGlob() or LoadHTMLFiles() 加载html资源

IT工作者

2022/07/25

1.5K0

UILabel加载html文本

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/53163142

用户1451823

2018/09/13

3K0

iOS Label加载HTML

ios http boolean plist width

Label加载富文本 func getHtml(){ guard let filePath = Bundle.main.path(forResource: "demo", ofType: "h

码客说

2019/10/22

1.8K0

React-Native系列Android——Javascript文件加载过程分析

React-Native应用程序的内容是由Javascript语言开发的，而Android或者IOS手机系统只是一个容器和各类服务提供者。

conanma

2021/11/02

2.8K0

用.env文件为NodeJS加载环境变量

编程算法 npm node.js git

使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。

疯狂的技术宅

2021/04/23

9.5K0

用.env文件为NodeJS加载环境变量

JavaScript HTML DOM

html javascript

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

陈不成i

2021/07/19

7390

Flutter中使用flutter_inappwebview加载远程的html文件

flutter ios android

参考：https://pub.flutter-io.cn/packages/flutter_inappwebview

越陌度阡

2021/01/13

2.9K0

相似问题

用Ajax加载HTML，用Ajax加载数据，用Javascript构建html

35

用javascript更改HTML文件中加载的内容

11

Wpf webbrowser用javascript加载html

16

用Javascript重新加载HTML标记

13

用嵌入的javascript文件DotNetBrowser加载本地HTML页面

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验