【问题标题】:How to resolve "frame blocked ... cross origin .. " error when origin is actually the same?当原点实际上相同时,如何解决“框架被阻止......跨原点..”错误?
【发布时间】:2019-06-09 12:00:51
【问题描述】:

从边栏中的 TBA 文件打开一个弹出窗口。

试图从弹出窗口中指向侧边栏打开器中的 json 全局变量会导致错误,我猜这就是源混淆的地方。

【问题讨论】:

  • 目标 iframe 元素的src 属性的值是多少?错误消息未显示目标 iframe 的来源。相反,它只是说,“阻止具有源“http://glasier.hk”的框架访问跨域框架。”句号。 http://glasier.hk/blazer/model/dore.js:6:19 部分向您指示代码中尝试访问跨域 iframe 的位置的位置。
  • 啊,我明白了!它必须是:'cors-anywhere.herokuapp.com/http://glasier.hk/cors/tba.html' - 见stackoverflow.com/questions/56475790/…。因此,如果我启用了我的网站,我就不需要“任何地方”。如果我知道如何做到这一点,它会起作用吗?
  • 当然不是这样......它是谷歌的 iframe,它被埋在 DOM 层次结构深处的一个表格单元中......对不起
  • 我想提供一个答案,即使问题有点离题。我现在可以使用 window.postMessage() 在侧边栏 html 和弹出窗口之间来回传递对象,从上面的快照中可以看出。答案会让其他人也能获得这种体验
  • 好的,现在重新打开

标签: javascript google-apps-script


【解决方案1】:

从屏幕截图中可以看出,我已经能够将 json 对象从侧边栏中的 TBA 界面传输到弹出窗口,反之亦然。 window.postMessage() 成功了。不如在 iframe 的父级中有 nset (命名集的层次结构),但我认为可行。也许可以将 nset 拆分为共享包和责任包,以提高速度和灵活性。

不仅仅是一张图片;这是代码:

在弹出窗口中

window.addEventListener("message", receiveMessage, false);

function start(){
  $(document).ready(function(){
    root = '1grsin';
    trial = 'msm4r';
    orig = 'ozs29';
    code = orig;
    path = "https://api.myjson.com/bins/"+code;
    $.get(path)
   .done((data, textStatus, jqXHR)=>{
     nset = data;
     opener.postMessage(nset,"https://n-rxnikgfd6bqtnglngjmbaz3j2p7cbcqce3dihry-0lu-script.googleusercontent.com");
   })
  })
}

    function receiveMessage(event) {
      console.log(event.data);
      $("#notice").html("Origin: "+ event.origin)
    }

在侧边栏待定

window.addEventListener("message", receiveMessage, false);

var popup;

function openMonitor(nset){
   var params = [
      'height=400',
      'width=400'
   ].join(',');
    let file = 'http://glasier.hk/blazer/model/model.html';
    popup = window.open(file,'popup_window', params); 
    popup.moveTo(100,100);
  }

  function receiveMessage(event) {
    console.log("origin: " +event.origin);
    console.log(event.data);
    popup.postMessage(nset, "http://glasier.hk");
  }

【讨论】:

    猜你喜欢
    • 2016-08-11
    • 1970-01-01
    • 1970-01-01
    • 2015-07-11
    • 2018-12-01
    • 2022-08-08
    • 2014-11-09
    • 1970-01-01
    相关资源
    最近更新 更多