为了轻松偷懒,不想从目的项目中开发目标项目中的页面,但目的项目中需要获取老项目中的页面,这里用了iframe跨域链接页面出现了问题

Blocked a frame with origin "http://......" from accessing a cross-origin frame.

出现此报错的原因是因为在http://driversys.edaijia.cc 下操作 http://www.edaijia.cc   下的dom导致。

项目框架是yii2,代码如下,项目中是在看代码中http://driversys.edaijia.cc 下操作的iframe连接指向是http://www.edaijia.cc   dom元素。

//http://driversys.edaijia.cc 项目下代码
<?php
Modal::begin([
'id' => 'create-modal-article',
'header' => '<h4 class="modal-title">选择长文章</h4>',
'footer' => '<a href="javascript:;" class="btn btn-info" id="confirm_article" >确定</a><a href="javascript:;" class="btn btn-danger" id="close_article_window" >关闭</a>',
]);
$requestUrl = 'http://www.edaijia.cc/v2/index.php?r=newNoticePost/selection';
$js = <<<JS
$('#create-modal-article .modal-body').html('<iframe name="article_ifm" id="add_long_article" width="99%" height="100%" style="border:0px"></iframe>');
$("#add_long_article").attr("src", 'http://www.edaijia.cc/v2/index.php?r=newNoticePost/selection'); $('#create-modal-article').find('.modal-header').find('.close').hide();
JS;

解决方法:

在父页面添加监听器,接收子页面的值:

window.addEventListener('message',function(e){

alert(e.data);

},false);

在子页面在要传值的地方调用以下语句传值:

window.parent.postMessage('值','http://www.....);

解决代码:

//http://www.edaijia.cc项目代码 

$("#new-notice-post-grid :radio").on('click', function () { //监听radio选中,并把值传递
window.parent.postMessage([$(this).attr('did'),$(this).val()],'http://driversys.edaijia.cc');
})
//http://driversys.edaijia.cc  项目代码,获取传递的值
//长文章radio获取
window.addEventListener('message',function(e){
window.did = e.data[];
window.title = e.data[]; },false);

跨域问题 Blocked a frame with origin "http://......" from accessing a cross-origin frame.的更多相关文章

  1. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  2. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  3. js如何获取跨域iframe 里面content

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 其中src可能存在跨域. 现有的获取方式   var test = document. ...

  4. 跨域传输信息postMessage

    widnow.postMessage()方法允许安全的跨域传输. Syntax otherWindow.postMessage(message, targetOrigin, [transfer]); ...

  5. 前端Js跨域方法汇总—剪不断,理还乱,是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  6. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  7. 前端页面调用Spring boot接口发生的跨域问题

    最近要重构一个基于spring boot的后端API服务,需要再本地测试.在本地测试时,运行在本地的前端页面发送一个ajax请求访问后端API,然后浏览器报错blocked CORS policy. ...

  8. IE下IFrame引用跨域站点页面时,Session失效问题解决

    问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...

  9. java springmvc 前端 跨域问题

    有个朋友在写扇贝插件的时候遇到了跨域问题.于是我对解决跨域问题的方式进行了一番探讨. 问题 API:查询单词URL: https://api.shanbay.com/bdc/search/?word= ...

随机推荐

  1. 初始HTML_表格

    Html表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. 打开Visual Studio 2017报错:未能正确加载“VSTS for Database Professionals Sql Server Data-tier Application”包

    出现如下错误 解决办法 > cmd > regsvr32 %windir%\system32\jscript.dll

  3. iOS 唤起APP之URL Scheme

    什么是URL Scheme 简单的说,由于苹果选择使用沙盒机制来保障用户的隐私和安全,APP只能访问自己沙盒数据,但同时也阻碍了应用间合理的信息共享.因此苹果提供了一个可以在APP之间跳转的方法:UR ...

  4. ORACLE基础之oracle锁(oracle lock mode)详解

    ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share  3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...

  5. zabbix入门

    第一章 监控知识基本概述 1.1 为什么要使用监控 1.对系统不间断实时监控2.实时反馈系统当前状态3.保证服务可靠性安全性4.保证业务持续稳定运行 1.2 如何进行监控,比如我们需要监控磁盘的使用率 ...

  6. C语言中函数返回字符串的4中方法

    C语言中函数返回字符串的4中方法 函数的构成部分:返回类型.函数名称.参数.函数主体 参数:函数调用时传入的参数称为实参,函数定义时出现的参数为形参 形参的作用在于接收实参传入的值,形参和函数内部的其 ...

  7. Linux 设备树详解【转】

    转自:http://www.pianshen.com/article/428276673/;jsessionid=D90FC6B215155680E0B89A6D060892D4 本文基于天嵌E9V3 ...

  8. Shell命令-用户用户组管理之useradd、usermod

    文件及内容处理 - useradd.usermod 1. useradd:添加用户 useradd命令的功能说明 useradd 命令用于建立用户帐号.useradd 可用来建立用户帐号.帐号建好之后 ...

  9. 8.Java基础_if-else和switch选择语句

    /* 选择语句(基本与C++相同) if-else语句: 格式一: if(关系式){ 语句体; } 格式二: if(关系式){ 语句体; } else{ 语句体; } 格式三: if(关系式){ 语句 ...

  10. 7.Java基础_Java数据输入

    import java.util.Scanner; public class Output { public static void main(String[] args){ Scanner sc=n ...