iframe

步骤如下： 1.下载pdfJs到本地（ 官网下载地址 ），放到项目根目录下的static文件夹内，将文件命名为pdfJs。 如下图 2. 使用iframe打开 <iframe id="pdfPlayer" src="URL" frameborder="0" width="100%" height="600px"></iframe> 或者：<iframe id="pdfPlayer" :src="pdfUrl3" frameborder="0" width="100%" height="600px"></iframe> 需要注意的是： file参数中默认只允许传简单路径比如： http://w ww.aaa.com/aa.pdf. 如果你要浏览的pdf路径需要传参数的话。 这时候直接传入的话会解析出错， 因为pdf.js无法判断参数是viewer.html的参数呢还是aa.pdf的参数。所以， URL 必须进行encode编码 ，encodeURIComponent() 把字符串编码为 URI 组件 来源： CSDN 作者： 紫电清霜 链接： https://blog.csdn.net/xiaochongwu/article/details/104009190

文件下载： 单个文件下载 window . open ( url ) 多个文件下载 多个文件下载用window.open不行，你会发现他只下载了一个，并不是所有。 let triggerDelay = 100 ; let removeDelay = 1000 ; this . urlList . forEach ( ( url , index ) => { this . createIFrame ( url , index * triggerDelay , removeDelay ) ; } ) ; // 这里是创建iframe的方法 function createIFrame ( url , triggerDelay , removeDelay ) { //动态添加iframe，设置src，然后删除 setTimeout ( function ( ) { var frame = document . createElement ( "iframe" ) ; frame . src = url ; frame . style . display = "none" ; document . body . appendChild ( frame ) ; setTimeout ( function ( ) { frame . remove ( ) ; } , removeDelay )

例如: <iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe> 方案一:用iframe的name属性定位 <input type="button" name="Button" value="Button" onclick="document.frames('ifrmname').location.reload()"> 或 <input type="button" name="Button" value="Button" onclick="document.all.ifrmname.document.location.reload()"> 方案二:用iframe的id属性定位 <input type="button" name="Button" value="Button" onclick="ifrmid.window.location.reload()"> 方案三:当iframe的src为其它网站地址(跨域操作时) <input type="button" name="Button" value="Button" onclick="window.open(document.all.ifrmname.src,'ifrmname','')"> 方案四:通过和替换iframe的src来实现局部刷新 可以用document

最近遇见一个需要上传百兆大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理大文件上传的思路，并给出了相关实例代码，由于PHP内置了比较方便的文件拆分和拼接方法，因此服务端代码使用PHP进行示例编写。 本文相关示例代码位于github上，主要参考 聊聊大文件上传 大文件切割上传 文件上传的几种方式 首先我们来看看文件上传的几种方式。 普通表单上传 使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。 然后编写index.php上传文件接收代码，使用move_uploaded_file方法即可(php大法好…) form表单上传大文件时，很容易遇见服务器超时的问题。通过xhr，前端也可以进行异步上传文件的操作，一般由两个思路。 文件编码上传 第一个思路是将文件进行编码，然后在服务端进行解码，之前写过一篇在前端实现图片压缩上传的博客

背景   项目开发的过程中，我们不可避免的会引入外部已经写好的HTML文件，那在不同的Vue脚手架中如何成功引入HTML文件呢？如何获取到HTML文件中的值呢？ 不同脚手架的不同引入方式   脚手架2   把要引入的文件（假设是aaa.html文件）放到static目录下，在Vue界面中引入： <iframe src="./static/aaa.html"></iframe>   脚手架3和4   把要引入的文件放到public目录下，在Vue界面中引入： <iframe src="/aaa.html"></iframe>   注意：在脚手架2中，src的地址就是HTML文件相对于Vue文件的相对地址；在脚手架3和4中，直接写/+文件名即可。 另外，还可以给iframe设置宽度和高度等一些属性，例如： <iframe src="/aaa.html" width="100%" height="800px" frameborder="0" scrolling="auto"> Vue文件获取HTML文件中的值   方式一：Vue文件自己获取   修改iframe的引入： <iframe src="/aaa.html" id="mainIframe" ref="mainIframe" name="mainIframe"></iframe>   Vue界面中，单击按钮可打印： var th

iframe的说明 iframe相当于页面的一个子页面，效果如图： 由图可见，作为子页面的iframe有自己的document，所以当我们通过iframe来获取当页面内容需要在document前加上parent即父级。 iframe的使用 当我们想要提交表单的结果显示在iframe中，我们需要在form表单中加入target指向iframe（与其name一致） 但当我们不想让提示内容显示在iframe区域内，而是在表单之内要怎么办呢？ 我们可以将结果通过在逻辑判断中使用JavaScript添加到iframe的父级页面。 来源： CSDN 作者： 虞粥粥 链接： https://blog.csdn.net/weixin_43540912/article/details/104031534

IOING 在做些什么？ IOING 在你的代码和浏览器之间架设了一个中间解释层，该解释层提供了一套新的语法来填补浏览器所不具备的能力。 SPA 开发痛点 开发一个 SPA 应用的痛点是不同模块页面的状态保存，当从一个页面跳转到另一个页面的时候窗口的所有状态都将被清空重载，历史页面与当前页面将不产生任何联系，这个过程是一个拆毁重建的过程，如果你要回到历史同样只能再次拆毁重建，并且在这个过程中不可避免的出现加载期的窗口白屏，显然这样的丑陋效果不符合一个高贵 App 的设定，但正因这种方式前后页面不共存的简单特性也使得开发逻辑变得简单，开发者只需考虑单个页面的逻辑即可，而每一次新页面的加载都能将之前页面进行完全释放，完全不需要担心高耦合和内存无法完全释放的问题，这也算是传统技术的优点，虽然简单粗暴，但是它很管用。那到底有没有两全其美的办法呢？ 传统模式带来的挑战 和 SPA 应用不同的是多页面应用往往相对要变得简单，页面与页面之间不需要有复杂的数据交换，也无需保存页面历史状态，因此使用传统技术最适合不过了。 而 SPA 应用则要协调页面间的关系，它的每一个模块都可能是联动的，而且需要保持窗口的数据状态，因而催生了另一个技术的流行，即通过使用 Ajax 和模版将新模块内容载入到当前页面，但这也导致新载入模块的脚本和 DOM 树内容在主文档下不断堆积，且在不需要时也无法将其很好移除和释放

<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe> 　　 方案一:用iframe的name属性定位 　　<input type="button" name="Button" value="Button" 　　onclick="document.frames(ifrmname).location.reload()"> 　　或 　　<input type="button" name="Button" value="Button" 　　onclick="document.all.ifrmname.document.location.reload()"> 　　 方案二:用iframe的id属性定位 　　<input type="button" name="Button" value="Button" 　　onclick="ifrmid.window.location.reload()"> 　　 终极方案:当iframe的src为其它网站地址(跨域操作时) 　　<input type="button" name="Button" value="Button" 　　onclick="window.open(document.all.ifrmname.src,ifrmname,)"> 　

HTML + CSS 宝典 第六节 html 进阶 1. iframe 元素 框架页 通常用于在网页中 嵌入另一个网页 iframe 可替换元素 （特点） 通过为行盒 通常显示内容 取决于 元素属性 CSS 不能完全控制其中的样式 具有行块盒的特点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=3, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> iframe { width: 100%; height: 500px; } </style> </head> <body> <a href="https://baidu.com" target="myframe">百度</a> <a href="https://douyu.com" target="myframe">斗鱼</a> <a href="https://taobao.com" target="myframe">淘宝</a> <iframe name="myframe" src="https://baidu.com"