解决跨域Uncaught DOMException: Blocked a frame with origin ** from accessing a cross-origin frame问题

最新推荐文章于 2023-07-05 17:58:16 发布

gusijin 最新推荐文章于 2023-07-05 17:58:16 发布 17322

iframe窗口修改元素，提示Uncaught DOMException: Blocked a frame with origin ** from accessing a cross-origin frame，无法修改

解决办法：

使用 postMessage() 方法用于安全地实现跨源通信

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法

语法
otherWindow.postMessage(message, targetOrigin, [transfer]);

参数说明
otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message 将要发送到其他 window的数据。
targetOrigin 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
transfer 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

postMessage双向发送消息

<div style="margin-bottom: 20px;">
    <button onclick="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>
iframe窗口 
<button onclick="handleEvent()">向父页面发送信息</button>
<p>子页面</p>
<script>
    // 注册消息事件监听，接受父元素给的数据
    window.addEventListener('message', (e) => {
        console.log('iframe=' + e.data);
    }, false);
    function handleEvent() {
        // 向父页面发消息
        window.parent.postMessage('子页面发的消息', '*');
</script>
                    解决跨域Uncaught DOMException: Blocked a frame with origin ** from accessing a cross-origin frame问题
                    问题iframe窗口修改元素，提示Uncaught DOMException: Blocked a frame with origin ** from accessing a cross-origin frame，无法修改解决办法：使用 postMessage() 方法用于安全地实现跨源通信window.postMessage(message,targetOrigin)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE
				问题描述：
UncaughtDOMException:Blockedaframewithorigin"http://localhost:46819"fromaccessingacross-originframe.
问题分析：
1、由于页面中子iframe嵌套了其他网站的页面，导致了跨域问题，无法获取子iframe的元素和方法。
					JavaScript访问html页面内嵌不同源iframe报错 js: Uncaught SecurityError: Blocked a frame with origin...
				最近遇到一个棘手的bug，App 中有一个网页内嵌了一个iframe，这个iframe一个类似客服机器人聊天窗口的弹出框，嵌在主网页某一个位置，是和主网页不同源的，需要获取iframe中的areatext元素，当用户点击的时候，弹出一个软键盘，供用户输入。
SUSE seld15, QT5.15.0
参考文档：
https://javascript.info/cross-window-communication
https://developer.mozilla.org/zh-CN/docs/Web
&nbsp;&nbsp;&nbsp;&nbsp;在不同的端口号，甚至是不同的ip进行iframe嵌套的时候，在父页面调用子页面的方法的时候，报错
SecurityError: Blocked a frame with origin from accessing a cross-origin frame…
问题原因
&nbsp;&nbsp;&nbsp;&nbsp;在不同端口号下，不能使用传统...
原因：Chrome 认为跨域不安全。
解决办法：跨页面操作涉及域的概念，错误的意思是：未捕获的安全错误：阻止了一个域为 null 的 frame 页面访问另一个域为 null 的页面。代码运行时在本地直接用浏览器打开的，地址栏是 file:/// 的页面，只需改为 localhost 访问就行。
我直接将前端静态页面资源扔到hbuider中并运行到浏览器Chrome中即可解决问题！
				　　工具环境：Layui框架下使用VS Code进行Chrome 调试。
　　问题描述：当Chrome浏览器使用iframe页面调用其他页面时会提示："Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame"。
　　　　　　但是IE和Edge是没有问题...
				遇到需要使用窗口的功能，是这样的 ，A站点的a1页面为主要显示页面，但是需要调用B站点的b1界面用来保存数据到B站点上，然后再将b1页面获取的地址体现到a1页面上，在调用页面的关闭事件的时候遇到问题：
Uncaught DOMException: Blocked a frame with origin 
了解出错的错误信息后百度了，都是写了写跨域的问题，修改地址为IP地址对本应用是不可取的，自己...
在不同的端口号，甚至是不同的ip进行iframe嵌套的时候，在父页面调用子页面的方法的时候，报错
SecurityError: Blocked a frame with origin from accessing a cross-origin frame…
问题原因
在不同端口号下，不能使用传统的iframe嵌套调用方法。
document.getElementById("mainFram...
<iframe id="mainframe" name="mainframe" frameborder="0" src="/../**" style="overflow-x: hidden; height: 1389px; width: 1000px;" width="1912"></iframe>
显示用a标签，targ...
在子页面，想使用父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题
解决方法：在子页面
window.postMessage("message", '*');//后面的*号就是处理跨域问题的
然后在父页面
window.addEventListener('message', function (msg) {
console.log(msg.data);
设置监听的方法就可以了
				这是内嵌 iframe 页面使用 window.parent 或 top.xxxx 导致的，在 子页面，想传递给 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。
解决办法
1、父页面监听 message，写法固定
window.addEventListener('message', function (e) {
  console.log(e)
2、子页面发送 message 消息，并附带参数
// window.parent 是 iframe 子页面获取父页面的 window..
解决这个问题有两种方法：
1. 修改服务器端设置，允许跨域访问。可以在响应头中添加 Access-Control-Allow-Origin 头信息，来指定允许访问的域名。
2. 使用代理，将请求转发到同源的服务器上，再返回结果。这样就能避免跨域问题。
无论采用哪种方法，都需要注意安全性问题，避免出现安全漏洞。
            解决 WARN [@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instea
            windows使用vim编辑文本powershell