iframe | 易学教程

可以传参的文件下载

阅读更多关于可以传参的文件下载

postFile(params, url) { var form = document.createElement("form"); form.style = "display:none;"; form.action = url; form.method = "post"; form.target = "form_iframe" document.body.appendChild(form); if(!document.getElementById("form_iframe")){ var ifreame = document.createElement("iframe") ifreame.id = "form_iframe"; ifreame.name = "form_iframe"; ifreame.style ="display:none;" document.body.appendChild(ifreame); } // 动态创建input并给value赋值 for (var key in params) { var input = document.createElement("input"); input.type = "hidden"; input.name = key; input.value = params[key]; form.appendChild

前端面试题四

阅读更多关于前端面试题四

面试有几点需注意：面试题目：根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。题目类型：理论知识、算法、项目细节、技术视野、开放性题、工作案例。细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。前端开发知识点： HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack CSS基本功：布局、盒子模型、选择器优先级 HTML5、CSS3、Flexbox JavaScript：数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs 其他：移动端、响应式、自动化构建、HTTP、离线存储、 WEB安全、优化、重构团队协作、可维护

selenium常用操作之iframe操作

阅读更多关于 selenium常用操作之iframe操作

iframe：一个网页里面嵌套了另一个框架/页面，即在一个HTML页面中还内嵌了另外一个HTML页面，只不过这个内嵌的HTML是放在</frame></iframe>标签对中。在python3.8中对应的selenium提供了两种方法来获取iframe中的内容：方式一：driver.switvh_to.frame(frame_reference) 语法： driver.switch_to.frame(iframe的name属性或webelement对象或下标) 示例： driver.switch_to.frame(“login_frame_qq”)#切换到name为login_frame_qq的iframe中driver.switvh_to.frame(0)#切换到第一个iframe中driver.switch_to.frame((By.xpath,"//div[@class="ptlogin_wrap"])) 方式二：frame_to_be_available_and_switch_to_it(frame_reference) 在前面的 selenium常用操作之等待操作中我们有介绍过，expected_conditons模块中提供的方法。此方法会判断iframe是否可用，并且会自动切换到iframe中。 frame_reference的值与方式一保持一致。示例：

未来魔法校的微前端实践

阅读更多关于未来魔法校的微前端实践

一、背景魔法校是tob起家，众所周知tob业务很容易做成巨石应用，近两年来魔法校飞速发展，我们的某个主要的前端项目遇到了瓶颈，那就是项目太大了。为了减少耦合度加快打包速度，我们选择将一些功能提出来新建项目，然后通过iframe的方式引入到主项目中去。虽然项目体积大的问题得到了解决，但用户体验却随之下降。因为每次用户切换到iframe的tab时不管优化的再好总要有一瞬间的白屏，整个系统使用起来没有连贯性，而且在iframe里切换页面浏览器的地址栏url并不会变化，给人的感觉就是两个系统。业务的快速发展迫使我们去寻找一种新的方式-微前端。二、微前端的基本概念 1、什么是微前端微前端是近两年比较火的一个概念，这个术语最初来自 2016 年的 ThoughtWorks 技术雷达，它将微服务的概念扩展到了前端领域。目前的趋势是构建一个功能丰富且强大的前端应用，即单页面应用(SPA)。前端层通常由一个单独的团队开发，随着时间的推移，会变得越来越庞大而难以维护。这就是传说中的前端巨无霸Frontend Monolith。微前端背后的理念是将一个网站或者 Web App 当成特性的组合体，每个特性都由一个独立的团队负责。每个团队都有擅长的特定业务领域或是它关心的任务。这里，一个团队是跨职能的，它可以端到端，从数据库到用户界面完整的开发它所负责的功能。然而

iframe仿Ajax上传文件

阅读更多关于 iframe仿Ajax上传文件

利用iframe框架完成文件上传前端页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe伪装上传文件</title> <script type="text/javascript" src="./jquery-2.0.0.min.js"></script> <script type="text/javascript"> function up(){ var fname='up'+Math.random();//产生随机name值 $('<iframe name="'+fname+'" width="0" height="0" frameBorder="0"></iframe>').appendTo($('body'));//创建iframe标签， $('form:first').attr('target',fname);//将php返回信息引到这个框架中来，不发生页面跳转 $('#xinxi').html('正在上传');//上传过程中的显示 //return false; } </script> </head> <body> <h1>iframe模拟Ajax文件上传</h1> <h2 id="xinxi"></h2> <form action="01.php" method=

js 下载文件

阅读更多关于 js 下载文件

window.open()只能打开一次，所以下载多个文件只能下载一个function download(name, href) { var a = document.createElement("a"), //创建a标签 e = document.createEvent("MouseEvents"); //创建鼠标事件对象 e.initEvent("click", false, false); //初始化事件对象 a.href = href; //设置下载地址 a.download = name; //设置下载文件名 a.dispatchEvent(e); //给指定的元素，执行事件click事件}下载多个文件的思路的创建多个iframe，且不能马上删除 var sites = ['url','url2']for (let i = 0; i < sites.length; i++) { const iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.height = 0; // url自己进行指定 iframe.src = sites[i]; document.body.appendChild(iframe); // 不能马上将iframe进行删除

JS 使用window.parent、window.top、window.self 判断iframe 嵌套

阅读更多关于 JS 使用window.parent、window.top、window.self 判断iframe 嵌套

首先介绍 window.self,window.top,window.parent,window.opener 四个的作用区别； window.self,window.top 是打开模式，而 windo.parent，window.opener 是父页面的打开模式。如果页面中有iframe或者framese时，parent是父窗口，top是最顶级父窗口（如果窗口中存在多层嵌套），self是当前窗口，opener是用open方法打开当前的窗口。 window.self 功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self 注：window、self、window.self是等价的。 window.parent 功能：返回父窗口。语法：window.parent 注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。 window.top 功能：返回顶层窗口，即浏览器窗口。语法：window.top 注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用；如果窗口仅在一层iframe中，top属性与parent属性等价。通过window.parent ,window.top,window.self可以分别获取当前窗口、父窗口、顶层窗口的对象引用

JQuery - Wait for two iframes to load

阅读更多关于 JQuery - Wait for two iframes to load

问题 I have a button that loads two different pages in two iframes. I need to wait for those loads to complete (like ready(), don't care about images and other content) and then trigger another action. How can I do this? 回答1: One way would be for the iFrame content to signal that it is ready. Here is a simplistic way to do this: Main Page var status = [false, false]; function doneLoading(index) { status[index] = true; if (status[1] && status[2]) alert("Both iframes are done loading"); } In each

前端常见跨域解决方案（全）

阅读更多关于前端常见跨域解决方案（全）

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www. domain.com/a.js http://www. domain.com/b.js 同一域名，不同文件或路径允许 http://www. domain.com/lab

不要再问我跨域的问题了

阅读更多关于不要再问我跨域的问题了

写下这篇文章后我想，要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”，形成一系列内容，希望大家看完之后再有人问你这些问题，你心里会窃喜：“嘿嘿，是时候展现真正的技术了！” 一、不要再问我this的指向问题了跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有webpack-dev-server搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉得不能再继续这样混下去了，我一定要彻底搞懂这个东西！于是就有了这篇文章。要掌握跨域，首先要知道为什么会有跨域这个问题出现确实，我们这种搬砖工人就是为了混口饭吃嘛，好好的调个接口告诉我跨域了，这种阻碍我们轻松搬砖的事情真恶心！为什么会跨域？是谁在搞事情？为了找到这个问题的始作俑者，请点击浏览器的同源策略。这么官方的东西真难懂，没关系，至少你知道了，因为浏览器的同源策略导致了跨域，就是浏览器在搞事情。所以，浏览器为什么要搞事情？就是不想给好日子我们过？对于这样的质问，浏览器甩锅道：“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互

订阅 iframe