当使用iframe作为文件下载的载体时,如何知道文件已经下载完毕。现有的iframe的onLoad方法具有兼容性问题,在chrome、IE下无法监听onLoad事件监听文件下载完毕,因为onLoad事件本身也是对iframe中的html结构的加载进度监听。
本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考,具体如下:
近期在参与一个紧急项目,临近过年了,工期紧,产品设计也比较粗暴,其中遇到一个小问题,
如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下:
从网站开发者的角度来看,第三方JS相比第一方JS有如下几个不同之处: 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存(Cache-Control/Expires) 如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下
本文将介绍前端如何封装一款 js-sdk 以及如何快速将你的应用变成 js-sdk , 我们将总结一些封装 js-sdk 的原则和案例, 来帮大家更快的上手 sdk 开发. 其中笔者还会以H5-Dooring 为例子, 介绍如何将 H5 页面编辑器封装成一个 js-sdk 供他人使用.
在实际的开发过程中,我们经常会遇到这种需求,导出文件或者下载文件的时候,弹出保存弹框然后指定文件名或者路径然后再点保存的这种, 一般网上看到的excel文件到处,基本上看到的都是指定下载路径的,这里我针对弹框这种方式做一个说明
官网:https://github.com/superalsrk/hexo-pdf
由于笔者2年前维护了几个比较老的项目是用jquery全家桶开发的,其中有些需求是需要跨页面交互和父子页面通信,故借此总结一下。另一块是前端实现文件下载功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面下的应用场景还是很多的。
由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react,angular方面的技术问题,可以移步我的其他文章),所以让我们用原生javascript来解决我们上面提到的问题吧。
这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的。
由于上面是方法会打开新的界面,所以我们需要对下载链接进行一些处理,比如转为blob格式:
原则上来说,HTML在使用<script>标签加载外部脚本文件时,会顺序下载,顺序执行,并阻碍其他资源文件的下载,比如图片(当然,如今主流浏览器是可以实现JS和CSS文件并行下载)。
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面(一般是全站添加)。
本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。
数周前,在伦敦 Heathrow 机场等飞机的空闲中,我顺便处理了一些工作上的事情。不经意间发现 Github 在性能方面的一些问题,颇为诧异。通过新 tab 打开的页面,其加载速度竟然比直接点击链接打开的页面要快。不信请看视频(译者注:可能需要科学上网):GitHub link click vs new tab。
整理了一下,定时器还是不好用,这也是没办法的办法了,网上大多的教程都是定时器,不是定时器的我又不明白人家啥意思,而且大部分都是安卓的,ios就是坑。
iFrame注入是一种非常常见的跨站脚本攻击。它包括已插入到网页或文章内容的一个或多个iframe代码,或一般下载一个可执行程序或进行其他动作使网站访客的电脑妥协。在最好的情况下,谷歌可能会标注该网站“恶意”。最糟糕的情况是,站点所有者和访问者最终使用了受恶意软件感染的计算机。
通常加载页面的时候,对于组件是并行下载的,现代大部分浏览器对于Js同样也是支持并行下载,但是在脚本下载、解析并执行完毕之前,不会开始下载任何其他内容。
要求在分享出来的h5页面中,有一个立即打开的按钮,如果本地安装了我们的app,那么点击就直接唤起本地app,如果没有安装,则跳转到下载。
Iframe 是一种将网页嵌入到另一个页面的内容中的方法。这是通过使用 HTML 元素、外部网站的 URL 以及窗口在您的网站上的外观参数来实现的。
大家好,又见面了,我是你们的朋友全栈君。 网页挂马 将木马程序上传到网站,使用木马生成器生成一个网马,放到网页空间,在添加代码使木马在网页打开时运行 1.常见的几种方式 将木马伪装成页面元素,木马被浏览器自动加载到本地 利用脚本运行的漏洞下载木马 利用脚本运行的漏洞释放隐含在网页脚本中的木马 将木马伪装成缺失的组件。或和缺失的组件绑在一起(flash播放插件等) 通过脚本运行调用某些com组件,利用其漏洞下载木马 在渲染页面内容的过程中利用格式溢出释放木马(ani格式溢出漏洞等) 在渲染页面内容的过程
Hybrid App 是半原生半 web 的开发模式,部分界面或者功能是原生的,其余部分是 html 和 js 来完成,最终 webview 加载 H5 页面;入职百度后第一个做的成型的产品是 Hybrid App,在开发过程中研究了 H5 与 NA 通信机制,特对通信机制进行介绍。
今天在点击客户档案导出的时候,发现先是打开了一个新标签,然后新标签自动关掉,弹出一个文件下载确认的窗口,点击确认后开始下载导出的Excel文件。这样的过程感觉窗口闪来闪去,而且可能会给用户带来困惑,是一种不好的体验。
对于实际的应用过程中,EasyNVR自身的web页面也是拥有自身的风格,因此和许多需要将视频播放页面集成到自身系统的用户就不是很友好了。EasyNVR自身的播放页面也是包含了,云台控制、视频分享、扫码直播等功能,然而部分客户需要的仅仅只是一个播放页面的集成。 这样,即使是简约的风格,也在用户的集成中带来了一定的麻烦。
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法。
1 html布局1.1 使用div块元素 元素是用于分组 HTML 元素的块级元素;1.1.1 举例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局学习</title></head><body> <div id="title" style="background-color: rgb(172, 132, 140)03JS异步加载的三种方式同步模式:又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。02Xss之Flash钓鱼剧情:某日xxx黑客,发现某网站存在XSS漏洞,但是有httponly,xxx黑客就想利用Xss进行钓鱼,如果只是钓到账号密码,可以去伪造登录页面,提示登录超时,这里以拿到权限为主。04JQuery iframe宽高度自适应浏览器窗口大小的解决方法https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js02点击下载文件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 点击 下载 </body> <script> var box = document.getElementById('box'); console.log(box); box03检测本地文件躲避安全分析来源:安全客 原文链接:https://www.brokenbrowser.com/detecting-local-files-to-evade-analysts/ 译者:WisFree 前言 上个月,我们一直都在尝试弄清楚攻击者到底是如何通过检测目标系统中应用程序的相关MIME类型来对用户进行攻击的。如果目标计算机中安装了反病毒工具的话,恶意软件将拒绝下载恶意代码。这样一来,攻击者不仅可以保证恶意软件不会被检测工具所检测到,而且还可以在目标主机中潜伏很长的时间。当然了,所有的这一切都发生在浏览器中。虽然厂04免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题免费视频直播、点播H5播放器SkeyeWebPlayer使用常见问题1、用常见问题——配置iframe允许自动播放和全屏SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可以全屏播放的,在使用时如果用到了iframe时,全屏按钮就会失效,需要设置如下 webkitallowfullscreen mozallowfullscreen allowfullscreen 即可:<iframe width="800" height="600" src="http://192.168.0.11103基于.net开发chrome核心浏览器【七】这是一个系列的文章,前面六篇文章的地址如下: 基于.net开发chrome核心浏览器【六】 基于.net开发chrome核心浏览器【五】 基于.net开发chrome核心浏览器【四】 基于.net开发chrome核心浏览器【三】 基于.net开发chrome核心浏览器【二】 基于.net开发chrome核心浏览器【一】 这篇文章和前面六篇文章关系不大,你如果懒得看前面六篇的话,从这一篇开始看也没问题 之前写的六篇文章,都是基于 Xilium07第四章 内嵌框架的使用学习目标: 了解内嵌框架 ---- 学习内容: 内嵌框架标签<iframe></iframe> 可以将文档A嵌入在另一个文档B中显示 优点: 1.保持网站风格一致 2.灵活性与方便性 3.提高网页下载速度 内嵌框架的使用 ---- <iframe scr="引用的页面地址" width="宽度" height="高度" name="框架名字" frameborder="是否显示边框" scrolling="是否出现滚动条"> frameborder="1" 1表示显示 0表示不显示 scrol03前端面试题-每日练习(1)html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;02EasyCVR视频平台用iframe集成播放页报错“无法打开麦克风”排查及修复EasyCVR视频平台不仅能够输出不同协议的视频流,还可以调用iframe进行其他项目上的集成。某个项目当中,客户用iframe集成播放页,集成完毕播放视频后,语音对讲功能除了问题,视频页面报错:“异常信息:NotAllowedError”。02微软出品自动化神器【Playwright+Java】系列(十)这些必会的骚操作,会助你一臂之力!那一刻,我突然感觉我可能真的也就这样了,不会有人喜欢,也不会结婚,只能是孤独终老了!01Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。03文件上传的最佳前端体验做法网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种Javascript库的基础上,开发了五花八门的插件。可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用。01Fluid -3- pdf.js PC,移动端查看 PDFpdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案,功能强大。03Polyhedron主题:一款简洁大方的双栏自适应Typecho主题首先,你需要启动Links插件才能保证主题正常运行。 由于原插件存在一定问题,我将修改后的版本置于下载区。02如何检测网站有没有被挂黑链_检测平台什么是网页挂马 网页挂马是指恶意攻击者攻击WEB网站后,在网页中嵌入一段代码或脚本,用于自动下载带有特定目的木马程序,而恶意攻击者实施恶意代码或脚本植入的行为通常称为“挂马”。 什么是SEO暗链 SEO暗链是SEO黑帽手法中相当普遍的一种手段。笼统地说,它就是指一些人用非正常的手段获取其他网站的权限后,修改其网站的源代码,加入指向自己网站的反向链接代码。其目的是优化自己网站中的一些关键字在搜索引擎中的排名,或是提高自己网站的搜索引擎权重。 暗链实例: TR-201202-000202BWAPP之旅_腾旅通app前期准备 BWAPP下载 BWAPP玩法 参考这个下载文件 bWAPP直接下载安装包,解压后,到虚拟机里直接打开文件夹,就可以看到vmx文件,点开后,就打开啦, 在物理机或者虚拟机里输入: http://[ip]/bWAPP/login.php ip从bee-box的终端里ifconfig得到02网站前端和后台性能优化21减少Iframe的数量 Minimize the Number of iframes01前端网络高级篇(六)网站性能优化缺点是:此方案不适合mobile应用;IE7以下不支持;如果一张图片在多个页面被用到,无法利用浏览器缓存。 为了解决无法缓存问题,可以将data:image应用到CSS样式中,比如:03Android 开发:基础入门篇-关于 gradle-X.X-all 安装失败问题<iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnAndroid" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe>06layer弹出层详解前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。02文件上传的渐进式增强文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 网页开发者们想了很多办法,试图提升文件上传的功06使用CEfSharp之旅(6)拦截网络请求 截取get post response返回「建议收藏」工作随笔,有需要的或者不懂的加我QQ群191065815 微信huo_cheng_yan01
同步模式:又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。 但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。
剧情:某日xxx黑客,发现某网站存在XSS漏洞,但是有httponly,xxx黑客就想利用Xss进行钓鱼,如果只是钓到账号密码,可以去伪造登录页面,提示登录超时,这里以拿到权限为主。
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 点击 下载 </body> <script> var box = document.getElementById('box'); console.log(box); box
来源:安全客 原文链接:https://www.brokenbrowser.com/detecting-local-files-to-evade-analysts/ 译者:WisFree 前言 上个月,我们一直都在尝试弄清楚攻击者到底是如何通过检测目标系统中应用程序的相关MIME类型来对用户进行攻击的。如果目标计算机中安装了反病毒工具的话,恶意软件将拒绝下载恶意代码。这样一来,攻击者不仅可以保证恶意软件不会被检测工具所检测到,而且还可以在目标主机中潜伏很长的时间。当然了,所有的这一切都发生在浏览器中。虽然厂
免费视频直播、点播H5播放器SkeyeWebPlayer使用常见问题1、用常见问题——配置iframe允许自动播放和全屏SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可以全屏播放的,在使用时如果用到了iframe时,全屏按钮就会失效,需要设置如下 webkitallowfullscreen mozallowfullscreen allowfullscreen 即可:<iframe width="800" height="600" src="http://192.168.0.111
这是一个系列的文章,前面六篇文章的地址如下: 基于.net开发chrome核心浏览器【六】 基于.net开发chrome核心浏览器【五】 基于.net开发chrome核心浏览器【四】 基于.net开发chrome核心浏览器【三】 基于.net开发chrome核心浏览器【二】 基于.net开发chrome核心浏览器【一】 这篇文章和前面六篇文章关系不大,你如果懒得看前面六篇的话,从这一篇开始看也没问题 之前写的六篇文章,都是基于 Xilium
学习目标: 了解内嵌框架 ---- 学习内容: 内嵌框架标签<iframe></iframe> 可以将文档A嵌入在另一个文档B中显示 优点: 1.保持网站风格一致 2.灵活性与方便性 3.提高网页下载速度 内嵌框架的使用 ---- <iframe scr="引用的页面地址" width="宽度" height="高度" name="框架名字" frameborder="是否显示边框" scrolling="是否出现滚动条"> frameborder="1" 1表示显示 0表示不显示 scrol
html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
EasyCVR视频平台不仅能够输出不同协议的视频流,还可以调用iframe进行其他项目上的集成。某个项目当中,客户用iframe集成播放页,集成完毕播放视频后,语音对讲功能除了问题,视频页面报错:“异常信息:NotAllowedError”。
那一刻,我突然感觉我可能真的也就这样了,不会有人喜欢,也不会结婚,只能是孤独终老了!
在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面,接口文档页面等。
网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种Javascript库的基础上,开发了五花八门的插件。可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用。
pdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案,功能强大。
首先,你需要启动Links插件才能保证主题正常运行。 由于原插件存在一定问题,我将修改后的版本置于下载区。
什么是网页挂马 网页挂马是指恶意攻击者攻击WEB网站后,在网页中嵌入一段代码或脚本,用于自动下载带有特定目的木马程序,而恶意攻击者实施恶意代码或脚本植入的行为通常称为“挂马”。 什么是SEO暗链 SEO暗链是SEO黑帽手法中相当普遍的一种手段。笼统地说,它就是指一些人用非正常的手段获取其他网站的权限后,修改其网站的源代码,加入指向自己网站的反向链接代码。其目的是优化自己网站中的一些关键字在搜索引擎中的排名,或是提高自己网站的搜索引擎权重。 暗链实例: TR-201202-0002
前期准备 BWAPP下载 BWAPP玩法 参考这个下载文件 bWAPP直接下载安装包,解压后,到虚拟机里直接打开文件夹,就可以看到vmx文件,点开后,就打开啦, 在物理机或者虚拟机里输入: http://[ip]/bWAPP/login.php ip从bee-box的终端里ifconfig得到
减少Iframe的数量 Minimize the Number of iframes
缺点是:此方案不适合mobile应用;IE7以下不支持;如果一张图片在多个页面被用到,无法利用浏览器缓存。 为了解决无法缓存问题,可以将data:image应用到CSS样式中,比如:
<iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/LearnAndroid" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe>
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的)。
文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 网页开发者们想了很多办法,试图提升文件上传的功
工作随笔,有需要的或者不懂的加我QQ群191065815 微信huo_cheng_yan
领取专属 10元无门槛券
手把手带您无忧上云