iframe

前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发： 通过input type="file" 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴 第一种是最常用的手段，通常还会自定义一个按钮，然后盖在它上面，因为type="file"的input不好改变样式。如下代码写一个选择控件，并放在form里面： <form> <input type="file" id="file-input" name="fileContent"> </form> 然后就可以用 FormData 获取整个表单的内容： $("#file-input").on("change", function() { console.log(`file name is ${this.value}`); let formData = new FormData(this.form); formData.append("fileName", this.value); console.log(formData); }); 把input的value和formData打印出来是这样的： 可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的Objet

前言 在不同的端口号，甚至是不同的ip进行iframe嵌套的时候，在父页面调用子页面的方法的时候，报错 SecurityError: Blocked a frame with origin from accessing a cross-origin frame… 问题原因 在不同端口号下，不能使用传统的iframe嵌套调用方法。 document.getElementById("mainFrame").contentWindow.xxxx()； 因为同源安全策略 你不能用javascript访问一个，如果你能做到这一点，那将是一个巨大的安全缺陷。对于同一源策略浏览器，阻止脚本尝试访问具有不同源的帧。 如果地址中至少有一个部分未保留，则认为来源不同： <protocol>://<hostname>:<port>/path/to/page.html 如果要访问iframe，协议、主机名和端口必须与域相同。 Examples 下面是尝试访问以下URL时将发生的情况 http://www.example.com/home/index.html URL RESULT http://www.example.com/home/other.html -> Success http://www.example.com/dir/inner/another.php -> Success http:/