配置Chrome支持网页内的frame跨域
前言 跨域限制可以保证安全,但是调试的时候关掉会更方便,然而现在网络上能找到的关闭跨域限制方法,在新版的Chrome浏览器上根本没用…… 经过一番摸索,发现用旧版的Chrome就可以绕过跨域限制,刚好我做的这个需要跨域内嵌frame的网页只是单纯展示的,所以这个正好符合我的需求,奥利给! 然后我找到了旧版的Chrome软件,解压出来是绿色版的可以直接运行,不过运行后发现直接把系统的Chrome给调
目录5 个章节
前言
跨域限制可以保证安全,但是调试的时候关掉会更方便,然而现在网络上能找到的关闭跨域限制方法,在新版的Chrome浏览器上根本没用……
经过一番摸索,发现用旧版的Chrome就可以绕过跨域限制,刚好我做的这个需要跨域内嵌frame的网页只是单纯展示的,所以这个正好符合我的需求,奥利给!
然后我找到了旧版的Chrome软件,解压出来是绿色版的可以直接运行,不过运行后发现直接把系统的Chrome给调起来了,然后只好放到Windows10的沙盒里面运行,(不得不说这个沙盒真的方便)
要取消Chrome的跨域限制,请在Chrome的快捷方式里加上命令行参数 --disable-web-security,如图所示:

运行之后会弹出提示说使用了不支持的命令行参数,会降低安全性啥的,就说明成功了,这时访问带有跨域frame的网页就是可以了
使用js操作frame中的元素
这部分是附加内容,简单说一下… 网络上一搜索都有的
首先是要确定frame或者iframe内的网页啥时候加载好,我懒得判断了,所以弄了个按钮,人肉判断,等frame里的网页加载完,按一下这个按钮,就实现自动把用户名密码填入frame内的网页并且自动登录
document.querySelector('#btn-login').onclick = function () {
var iframe_window = document.getElementById('hik').contentWindow
var iframe = iframe_window.document
}
然后就可以 iframe.querySelector 随意操作 frame内的DOM了
旧版Chrome下载
Chrome45版本:https://pan.baidu.com/s/1bCv9W8gcm9oi0tHOKuAgGw (提取码:74xr )
更多版本的可以看这个:https://www.zhihu.com/question/20364836
参考资料
- 谷歌浏览器Chrome 80版本默认SameSite导致跨域请求Cookie丢失:http://www.withcoder.com/articles/server_side/zs/434.html
- iframe 跨域,有没办法获取 iframe子页面元素:https://segmentfault.com/q/1010000017568917/a-1020000017570521
欢迎交流
程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践,在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料,同时有任何问题都可以在公众号后台留言~
_EOF_
配置Chrome支持网页内的frame跨域
- 本文作者:
- 程序设计实验室
- 版权声明:
- 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
相关文章
返璞归真!使用 Alpine.js 开发交互式 web 应用,抛弃 node_modules 和 webpack 吧!
前端框架层出不穷,项目越做越大,alpine.js 和 htmx 这种库是反其道而行,可以用最简单的方法来开发现代化的 web 应用。
2024-11-21 · Web前端 · 约 1 分钟
使用国内NPM镜像源提高速度
NPM介绍 npm(全称 Node Package Manager,即“node包管理器”)是Node.js默认的、以JavaScript编写的软件包管理系统。 npm可以管理本地项目的所需模块并自动维护依赖情况,也可以管理全局安装的JavaScript工具。 但是由于npm的源在国外,所以国内使用起来动辄10kb/s,甚至根本下载不了,所以使用国内镜像源替代官方源就很有必要了。 国内源 淘宝np
2022-02-25 · Web前端 · 约 1 分钟
在Next.js中集成swagger文档
Next.js 本来就不能直接用 Swagger,非要用还得自己折腾 API Routes?自动生成工具?手动写 Spec?这简直是在侮辱开发者。手动注释?这操作简直是在挑战耐心极限。
2025-09-01 · Web前端 · 约 1 分钟
使用 swagger-typescript-api 在前端项目里生成请求代码
swagger-typescript-api?文档写得像草稿,还得自己摸索。那些花哨的模块化选项除了报错还能干嘛?老老实实生成单文件,配个客户端封装,省得每次折腾。
2025-11-03 · Web前端 · 约 1 分钟
讨论
共 0 条加载评论中…