首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS应用】Iframe 解决跨域

    所以每个知识点都会写成文章,所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 跨域的东西, 简直不要接触太多,网上相关内容一抓一大把,但是突然学习到一个关于前端解决跨域的方式 就是 利用 iframe...1、基本原理 2、简单模拟 2、封装的函数 3、封装函数实战 解决场景 现在我们在 a.com 的域名下有一个页面 我们要请求 b.com 下的一个接口,很明显是会跨域的,无法直接请求 今天我们使用 iframe...需要传递给真正需要数据的父页面(同样是 a.com 下) 大概了解之后,我们来说一下简单流程 现在有 a.com 下的内容页 A,需要请求接口 b.com/xxxx,但是跨域 1、内容页 A 嵌入一个隐藏 iframe...,iframe 加载 b.com 下的辅助页面 B 2、辅助页面B 开始请求接口 b.com/xxx,请求成功,存放到 window.name 3、隐藏 iframe 由页面B 跳转到 a.com 下另一个辅助页...比如请求的接口需要某些参数,这些参数是父页面提供的,所以就只能把这些参数放到 iframe 的 url 上以便通信 拼接 url 函数 function parseUrl (url, param) {

    14.8K11

    js判断iframe加载是否成功的方法

    今天木槿来探讨一下js判断iframe加载是否成功的方法,并且兼容多种浏览器。...由于经常需要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。...这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面:ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在...iframe.readyState == "loaded"){//代码能执行到这里说明已经载入成功完毕了//要清除掉事件iframe.detachEvent( "onreadystatechange",...状态会跳过 complete 所以我们loaded状态也要判断if (iframe.readyState === "complete" || iframe.readyState == "loaded")

    1.7K20

    第三方Javascript开发系列之投放代码

    例子如下: (function(url){ // 第一部分 var dom,doc,where,iframe = document.createElement('iframe'); iframe.src...第二部分 try { doc = iframe.contentWindow.document; } catch(e) { // IE下如果主页面修改过document.domain...,那么访问用js创建的匿名iframe会发生跨域问题,必须通过js伪协议修改iframe内部的domain dom = document.domain; iframe.src="javascript...= "js-iframe-async"; js.src = url; this.body.appendChild(js); }; doc.write('<body onload...而且因为域名不同,天然提供安全性的保障,第三方代码不能获取或修改开发者站点的重要信息。缺点也很明显:就是能做的事情仅限于iframe内部。比较适合不需要访问页面就可以提供内容的需求。

    97020

    【前端编程】加载第三方JS的各种姿势

    第三方JS文件一般是不同域名的且JS内容不可控,所以此方法就不适用了 iframe中加载JS – 将你的JS文件直接放到另一个页面的HTML中,然后将此页面URL地址作为iframe标签src属性。...此方法需要增加一次页面请求,而且因为是在iframe内部执行了,第三方JS文件本身也需要修改,故并不是很适用 先缓存再执行 – 利用JS文件的强缓存,先使用new Image().src = 'http...// IE下如果主页面修改过document.domain,那么访问用js创建的匿名iframe会发生跨域问题,必须通过js伪协议修改iframe内部的domain dom...js.id = "js-iframe-async"; js.src = url; this.body.appendChild(js);..._l();">'); doc.close(); })('test.js'); 上述代码分为两个部分: 创建了一个隐藏的iframe标签,设置其src值为JS代码,然后插入到主页面中 在iframe

    4.2K90

    writeup | 应该不是 XSS

    发现是通过js进行子页面的渲染。类似于iframe。 一共有四个js文件,前两个明显是jQuery的库文件,不用管它,开始分析main.js与app.js ? main.js很明显是渲染页面代码。...通过构造js,来让管理员直接访问main页面,然后将其源码拖下来。 首先通过js引入一个iframe,来访问main页面,然后通过js拿到iframe的源码,发送回来。...最终代码如下 var iframe = document.createElement("iframe"); iframe.src = ".... 然后进行多次提交。...自己想了想,完全可以打源码,拿到管理员token后,然后通过构造csrf去修改管理员密码,然后登陆。 貌似自己的是非预期解法,毕竟登陆页面和修改密码页面都没有用到,而且自己这个也不算csrf。

    1.2K60

    无界微前端是如何渲染子应用的?

    : • 创建子应用 iframe • 解析入口 HTML • 创建 webComponent,并挂载 HTML • 运行 JS 渲染 UI 创建子应用 iframe 要在 iframe 中运行 JS,首先得有一个...(iframe, { // iframe 的 url 设置为主应用的域名 src: mainHostPath, style: "display: none",...创建 iframe 的 DOM,并设置属性 2. 将 iframe 插入到 document 中(此时 iframe 会立即访问 src) 3....的 src 要设置为主应用的域名 为了实现应用间(iframe 间)通讯,无界子应用 iframe 的 url 会设置为主应用的域名(同域) • 主应用域名为 a.com • 子应用域名为 b.com...((content) => composeCssLoader(content, src, curUrl)), }; }); 修改后的 CSS,会存储在 processedCssList 数组中,需要遍历该数组的内容

    1.2K30

    加载第三方JS的各种姿势

    第三方JS文件一般是不同域名的且JS内容不可控,所以此方法就不适用了 iframe中加载JS – 将你的JS文件直接放到另一个页面的HTML中,然后将此页面URL地址作为iframe标签src属性。...此方法需要增加一次页面请求,而且因为是在iframe内部执行了,第三方JS文件本身也需要修改,故并不是很适用 先缓存再执行 – 利用JS文件的强缓存,先使用new Image().src = 'http...iframe = document.createElement('iframe'); iframe.src = "javascript:false"; iframe.title = ""...// IE下如果主页面修改过document.domain,那么访问用js创建的匿名iframe会发生跨域问题,必须通过js伪协议修改iframe内部的domain dom = document.domain..._l();">'); doc.close(); })('test.js'); 上述代码分为两个部分: 创建了一个隐藏的iframe标签,设置其src值为JS代码,然后插入到主页面中 在iframe

    6.2K10
    领券