开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在iframe加载网站时显示加载gif？

在iframe加载网站时显示加载gif，可以通过以下方法实现：

使用CSS和JavaScript控制加载动画的显示和隐藏。

首先，在HTML中添加一个包含加载动画的div元素，并将其设置为透明背景和绝对定位。然后，在iframe元素的上方添加一个遮罩层，以便在加载时遮盖iframe。

<!DOCTYPE html>
<html>
<head><style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;
}
</style>
</head>
<body>

<div class="iframe-container">
 <iframe src="https://example.com" onload="hideLoader()"></iframe>
  <div class="overlay"></div>
  <div class="loader">
    <img src="loading.gif" alt="Loading...">
  </div>
</div><script>
function hideLoader() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.overlay').style.display = 'none';
}
</script>

</body>
</html>

使用CSS和JavaScript控制加载动画的显示和隐藏，并在加载完成后自动隐藏加载动画。

在上述代码的基础上，可以使用JavaScript监听iframe的加载事件，并在加载完成后自动隐藏加载动画。

document.querySelector('iframe').addEventListener('load', function() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.overlay').style.display = 'none';
});

通过以上方法，可以在iframe加载网站时显示加载gif，并在加载完成后自动隐藏加载动画。

相关搜索:GIF在页面加载时冻结 Javascript :无法显示正在加载的GIF jquery显示在加载时在容器中加载gif 使用jQuery延迟显示ajax加载gif 加载iframe并更改其源时显示加载符号吗？加载iframe时执行javascript 加载wordpress网站时显示错误加载时触发Iframe，即使Safari上未加载iframe 加载页面时显示动画，如:hover:before 在加载javascript iframe时加载消息

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iframe 加载外部资源，显示隐藏loading，onload失效

在项目中使用iframe 来加载外部资源，需要在iframe请求外部资源的时候，需要显示一个loading，在加载完成后，将这个loading隐藏掉，刚开始看到W3C中 iframe有一个 onload...事件----该事件在iframe加载资源完成后就会触发，但是这个事件我试了试，发现触发不了，最在https://stackoverflow.com/questions/20572734/load-event-not-firing-when-iframe-is-loaded-in-chrome...找到了有效的方法解决办法如下： 1 设一个变量，var show_loading...= true; //这个变量为真表示loading显示，反之loading隐藏然后设一个计时器 var self = this var html_iframe = document.getElementsByClassName...500) 这样在刚开始请求的时候就显示loading，然后启动了计时器，每500ms检测一次，如果iframe内有内容的话，就将loading隐藏了

1.9K2 0

Android 9.0使用WebView加载Url时，显示页面无法加载

最近使用WebView加载Url显示页面，因为之前已经使用过很多次这种方式了，打包后在6.0的测试机上测试没什么问题，然后安心的将包给测试，测试大佬的手机系统是Android 9.0的，所以就出现了页面无法加载的情况

6.6K3 0

datables之加载数据时显示进度条

如果配置datables加载数据的时候显示进度条呢？...如下图所示效果：这个功能采用模态框实现，弹出模态框和关闭模态框 HTML代码：（随便放在一个位置，因为是隐藏的）何时显示模态框（动态的进度条）呢初始化datables的时候显示这个模态框代码如下： //显示加载数据的进度条 $("#loadingModal...的时候关闭模态框 var table = $('#taaa').dataTable({ initComplete: function(settings, json) { //当datables初始化完毕时...//关闭加载数据的等待进度条 $('#loadingModal').modal('hide'); } })

1.7K2 0

网站建设（二）通用--页面刚加载时的loading效果

撇开如何优化加载资源不谈，在页面加载时，不论是有过多的加载资源，还是有一些提前处理逻辑。这一过程可能不希望用户看到，显示一个友好的loading会比较好一点。...也就是说需要渲染完页面元素以后，显示loading才是正确的选择。所以引用外部的script，抑或所有的ajax，尽量写到body最后，在加载这些资源前，设置出现loading。...具体网页示例 http://demo.wpcom.cn/preview/justnews 这个网站的处理方式是这样的： 1）所有的页面元素全部放在 id=iframe 的 iframe 中（除了loading...元素），这样就可以快速的渲染完body，此时，loading元素显示出来。...2）监听 iframe 的onload事件，当 iframe 加载完成时，移除 loading 效果。

2.1K2 0

Pubmedy加载时显示程序包无效的解决方案

解决方案：将PubMedy.crx重命名为PubMedy.rar或者PubMedy.zip 解压到要安装的位置找到扩展程序选项，并启用开发者选项选择加载已解压的扩展程序 5.

7013 0

微信小程序动态加载swiper时不显示的问题（爬坑）

touchstartHandlerForDevtools 解决方法：因为小程序会保留上一次滑动swiper时候的current，所以会出现上次滑动到的current在这次的数据中不存在问题，所以，每次动态加载...swiper-item前，需要设置swiper的current属性为0 #问题二 swiper 的current每次设置了0，但是还是不显示 swiper，检查元素是存在的，并且current = -1... 解决方法，动态设置swiper-item的数据时，还需设置current = 0，并且current和swiperList不能在一个this.setData

1.9K3 0

解决winform中mdi子窗体加载时显示最大化最小化按钮的方法

场景：在mid加载子窗体的时候如果指定WindowState为Maximized，加载完成后主窗体会显示最大化、最小化、关闭的按钮图标。解决方法： 1.更改主窗体FormMain的属性。

1.6K3 0

为iFrame添加动态载入效果，提高用户体验

昨天在制作展示导航 WordPress 插件时，把这个问题也一并处理了，其中涉及到了这个 iFrame 动态载入效果，现在记录一下，顺便分享。先展示下效果：加载中： ? 完成后： ?...id="loading"> <img style="floa: left;height: 20px;width: 20px;" src="http://zgboke.com/loading.<em>gif</em>...代码之前先插入一个 div 用于 <em>iframe</em> 载入前的<em>显示</em>，除了 id 需要一一对应，其他自行发挥即可。...②、将 <em>iframe</em> 的高度设为 0，并在原有 <em>iframe</em> 的基础上插入<em>加载</em>前和<em>加载</em>后的函数调用 onreadystatechange=stateChangeIE(this) onload=stateChangeFirefox...(this) ③、<em>如</em>代码的 8~28 行新增 2 个 js 函数即可，注意上下元素 ID 需要一一对应； ④、其中 22 和 23 行禁止 <em>iframe</em> 未<em>加载</em>完成的空白占位，只有<em>加载</em>完成之后，才会将

2K4 0

https中引入http资源资源所导致的问题

虽然这样让http升级为https,但是导致出现的问题是,之前加载http资源的图片显示不了, 样式,js加载不了, 写在本地还行,但如果是公共的js文件,往往就是存在cdn或者其他服务器上, 这时候如果访问不了...htpps页面在显示“混合内容”时候，会出现以下问题： 1、加载了混合内容，但会出现警告； 2、不加载混合内容，直接会显示空白内容； 3、在加载混合内容之前，会出现类似是否“显示”，或存在不安全风险而被...浏览器出现以上混合内容显示的问题，是因为https协议请求的站点，读取的资源文件js、css、图片、音视频，甚至包括请求post和get，还有iframe的页面，都必须是https协议的。...因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题了，比如：图片显示不了，样式加载不了，JS加载不了....其他用法这个小技巧同样适用于 CSS .omg { background: url(//test/kittyonadolphin.gif); } 推荐办法相对协议, 如果你的网站同时准备了https

4.4K8 2

图片和视频防盗链简单介绍

，显示的图片都用 image 目录下的 replace.gif 图片替换掉。...注意替换显示的图片不要放在设置防盗链的 img 目录下。...不建议，因在某些开启隐私模式的浏览器中，或https页面引用下，referer是空的）　　2、地址变更（lighttpd的是根据有效时间，nginx的根据是md5，IP地址变化）　　3、登录校验（如必须登录网站帐号后才能访问...，否则无数得到原数据，见于海康监控系统详解见：http://imweb.io/topic/59819d7bf8b6c96352a593ff 扩展二：防止网站被镜像，被iframe 1.防止网站被镜像（...，如果不是，则跳转到绑定的域名上来，这样就不怕网站被别人iframe了。

3.3K7 1

传说中图片防盗链的爱恨情仇

官方输出图片的时候，判断了来源(Referer)，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 Referer 就是：你的网站地址；你的网址肯定没在官方的白名单内，( 当然作为可操作性极强的浏览器来说...那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。目的盗链是指在自己的页面上展示一些并不在自己服务器上的内容。...那么 $invalid_referer等于 1，在if语句中返回一个 403 给用户，这样用户便会看到一个 403 的页面,如果使用下面的 rewrite，那么盗链的图片都会显示 403.jpg。...登录校验（如必须登录网站帐号后才能访问）以下是防止网站被镜像，被 iframe 1....，如果不是，则跳转到绑定的域名上来，这样就不怕网站被别人 iframe了。

9014 0

Webview 为 VSCode 开启了一扇门，安全限制却又把它关上了

，通常用来保存/恢复状态销毁：onDidDispose，面板被关掉时触发，用来完成一些清理工作，如停掉 timer 特殊的，Webview 进入后台时内容会被销毁，再次可见时重新创建这些内容： The...用户切换回来，或者由插件通过panel.reveal()让 Webview 回到用户眼前时，Webview 内容会重新加载。...如allow-modals，导致无法alert（具体见#67109）加载本地资源受限，默认只允许访问插件目录、以及打开的工作空间目录，且需通过特定 API（webview.asWebviewUri）转换...此类错误无法直接捕获（具体见Catch error if iframe src fails to load），但可以在通过iframe加载资源之前，尝试访问该资源，确认可访问才加载： fetch(url...).then(() => { // 可通过iframe加载 frames[0].src = url; }, () => { // 无法通过iframe加载，提示出来 }); 六.总结看似灵活开放实际限制极多

5K3 0

iframe基本知识及iframe版本Tab切换

HTML5学堂：本文当中，会依次为大家介绍iframe是什么，为何使用iframe；如何在当前网页中调用iframe中的标签和内容；如何在iframe中调用当前网页中的内容；检测iframe内容是否加载完成...；利用iframe防止钓鱼；如何让iframe中加载的内容决定外层iframe的宽高。...iframe是什么，为何使用iframe？ iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容。...'> 如何在当前网页中调用iframe中的标签和内容？...框架'); }); 防止别人使用自己的网站钓鱼为被调用的iframe文件(自己的网站)，添加如下代码： if (window!

4.1K4 0

油猴脚本从编写到检测

油猴脚本记（含检测）写脚本模拟爬取市面上网站（淘宝、京东、美团等）的页面内容油猴脚本是通过JS来编写，我也才接触只是对dom进行操作来完成首先是@match需要设置，就是用来说明脚本在哪个页面执行...那么脚本就设置在列表页进行为了直观显示，将在列表页创建一个iframe用来显示爬取的详情页模拟用户去点击每一个商品操作，这样子做轮询实现列表页：获取当前的页面，获取商品数，获取每个商品的链接...创建iframe，加载商品的链接两个函数做递归，在加载第二个商品时候需要将第一个iframe删除 // ==UserScript== // @name (自定义随意) // @namespace...author You // @match （模板https://xxx.com/xxx/*）来匹配需要之行脚本的页面 // @icon data:image/gif...也必须是https，如果iframe是http那么需要从浏览器中去单独的设置，否则浏览器是会报错无法显示frame内容使用setTimeout()函数达到延迟效果，有时由于网络问题页面还没有加载完成

4.8K1 0

用框架的你，可能早已忽略了这些事件API

load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeunload/unload —— 当用户正在离开页面时。...你可能在某些网站上看到过（如果你使用浏览器自动填充）—— 登录名/密码字段不会立即自动填充，而是在页面被完全加载前会延迟填充。这实际上是 DOMContentLoaded 事件之前的延迟。...; }; 它的行为已经改变了，因为有些站长通过显示误导性和恶意信息滥用了此事件处理程序。所以，目前一些旧的浏览器可能仍将其显示为消息，但除此之外 —— 无法自定义显示给用户的消息。...src="iframe.html" onload="log('iframe onload')"> <img src="http://en.js.cx/clipart/train.<em>gif</em>...当所有资源（<em>iframe</em> 和 img）都<em>加载</em>完成后，document.readyState 变成 complete。

1.7K1 0

前端网络高级篇（六）网站性能优化

网站性能优化可以从下面总结点入手。 1....尽量将CDN的域名设置的不同于请求方网站的域名。比如，网站为a.com，CDN域名可以设置为acdn.com。为什么呢？...不利于SEO：搜索引擎的检索程序无法解读iframe中的src 阻塞onload事件：iframe不加载完毕，就不会触发父窗口的onload事件。...影响页面资源并行加载：iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面资源的并行加载。...图片懒加载通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

1.9K3 0

iframe框架及优缺点

frameborder：规定是否显示框架周围的边框。 scrolling：规定是否在 iframe 中显示滚动条。 width：规定iframe的宽度，建议使用CSS替代。...优缺点优点可以跨域请求其他网站，并将网站完整展示出来典型系统结构可以提高代码的复用性创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象模块分离，若多个页面引用同一个iframe，则便于修改操作...实现广告展示的一个解决方案若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面缺点 iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件...不利于SEO，搜索引擎的爬虫无法解读iframe的页面。有些小型的移动设备如手机等无法完全显示框架，兼容性较差。...iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。

3.2K2 0

Hijack攻击揭秘

它通常使用一个ifream覆盖掉当前页面，欺骗用户点击iframe中的恶意内容。 Likejacking通常是针对社交网站的一种攻击手法，攻击者会欺骗用户去点击一个伪造的图标或按钮。... Clickjacking需要两个iFrame配合来做，底层的iFrame显示正常的页面...最简单的方法是，直接覆盖一层透明的，iframe在目标网站上，iframe中可以包含一个按钮或者链接。...这时候我可以给我的wordpress装上一个劫持插件（节操何在），这样每一个在我wordpress网站上点击的用户，都会给我刷一个赞。 ? ?...下面的表列举了支持x-frame选项的浏览器，X-frame需要在服务端设置，一些硬件设施如本地流量管理器也可以对x-frame进行设置。

1.8K9 0

Cookie-Stuffing

Cookie Stuffing (以下简称CS)是一个网赚技术主要用于CPS，就是当一个浏览者访问一个与第三方购物或者消费网站不相关的网站时候，他所使用的网页浏览器里会被恶意留下一个Cookie，在这个...但是，如果所提供的URL在最后没有像“.jpg”，“.gif”或“.png”这样的扩展名。...联盟会员将iframe嵌入到加载其联属网址的网页上。Frames以类似的方式工作。这种技术不再流行，因为现代浏览器中的框架已被弃用。...（不过会在地址中显示出来aff）四、Stylesheets css定义了如何显示网页。它们像图像一样被检索 - 浏览器被指示访问一个URL。...会员可以将直接联属网址作为图像放入样式表中，并以此方式加载。这是一种难以检测的方法。

1.3K3 0

JavaScript 页面资源加载方法onload，onerror总结

资源加载：onload，onerror 浏览器允许我们跟踪外部资源的加载 —— 脚本，iframe，图片等。...它会在脚本加载并执行完成时触发。...它要等到获得 src (*) 后才开始加载。对于来说，iframe 加载完成时会触发 iframe.onload 事件，无论是成功加载还是出现 error。这是出于历史原因。...以后，当相同图片出现在文档中时（无论怎样），它都会立即显示。...换句话说，当所有图片都已加载完成，或出现错误输出时，将执行 callback。例如，当我们计划显示一个包含很多图片的可滚动图册，并希望确保所有图片都已加载完成时，这个函数很有用。

3.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭