Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.

最近在写一个项目：需要在页面使用iframe来做登陆功能，本想使用parent.window.location.reload();刷新页面的，最后报错了“Blocked a frame with origin "https://my.xxxxxxx.com" from accessing a cross-origin frame”。

很明显这个报错就是跨域的问题，因为iframe遵循"同源策略"，所以在不同源的情况下是无法进行DOM操作的。因为我只是需要刷新父级的页面所以我使用了：parent.window.location.href = document.referrer;用来在子级窗口刷新父的页面。

如果需要进行DOM操作或者传参的可以使用 postMessage() 方法用于安全地实现跨源通信，如下：

父级页面：

<div style="margin-bottom: 20px;">
<button οnclick="handleEvent()">向子页面发送信息</button>
</div>
<iframe src="iframe.html" id="iframe"></iframe>
<script>
function handleEvent() {
// iframe的id
var f = document.getElementById('iframe');
// 触发子页面的监听事件
f.contentWindow.postMessage('父页面发的消息', '*');
}

// 注册消息事件监听，接受子元素给的数据
window.addEventListener('message', (e) => {
console.log(e.data);
}, false);
</script>

子窗口：

<button οnclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>
// 注册消息事件监听，接受父元素给的数据
window.addEventListener('message', (e) => {
console.log('iframe=' + e.data);
}, false);

function handleEvent() {
// 向父页面发消息
window.parent.postMessage('子页面发的消息', '*');
}

</script>

Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.相关推荐

Access to script at ‘xxx‘ from origin ‘null‘ has been blocked by CORS policy: Cross origin requests
前言本地调试js时,遇到本错误 Google Chrome 84.0.4147.135 (正式版本) (64 位) (cohort: Stable Installs Only) 修订版本 c42bd ...
【VSCode】from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported
Access to script at 'file:///C:/Users/dawulei/Desktop/%E9%A1%B9%E7%9B%AE/%E5%9D%A6%E5%85%8B%E5%A4%A7 ...
ajax跨域请求问题：Access to XMLHttpRequest at……has been blocked by CORS policy: Cross origin requests
背景:本地代码调试时,加载本地资源正常,jquery的AJAX请求服务端资源报错. Access to XMLHttpRequest at '***** ' from origin 'null' ha ...
解决Cross origin requests are only supported for protocol schemes问题
解决Cross origin requests are only supported for protocol schemes问题问题描述本前端小白在学习的时候尝试按照一个网上的blog的代码来跑 ...
【跨域异常】Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-exten
一.背景描述下面是我用ajax异步请求时的写法,请注意url是怎么写的,下面的错误就是由于这个url的写法导致的. // 获取省份列表 $(document).ready(function () { ...
Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法
当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx ...
【chrome错误】Cross origin requests are only supported for protocol schemes: http, data,chrome-extension
使用ajax请求本地文件,chrome会报跨域错误:XMLHttpRequest cannot loadfile:///C:/Users/Li/Desktop/images/alist.json.Cr ...
[NodeJS] Jest 环境下 Axios 请求报错: Cross origin http://localhost forbidden
文章目录问题概述解决方案参考本博客站点已全量迁移至 DevDengChao 的博客 https://blog.dengchao.fun , 后续的新内容将优先在自建博客站进行发布, 欢迎大家访 ...
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, h ...

Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.

Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.相关推荐

最新文章

热门文章