需求:

        近期工作负责一个互联网应用A(我公司应用)与还有一个互联网应用B进行通讯。通讯的方式是这种:还有一个互联网应用某些表单信息须要从我公司的互联网应用获取。首先用户訪问互联网应用B。接着在表单编辑页面点击button创建新窗体显示互联网应用A内容。用户在应用A窗体选取好内容后点击button,应用A的窗体关闭。应用A选取好的内容填充到应用B特定的表单元素上。

       这个问题最简化描写叙述就是,浏览器有两个不同站点(域)的页面,页面B须要获取页面A的信息。

问题解决过程:

      刚開始我也不知道这个是跨域问题,尽管同事一開始就告诉我说这是javascript跨域问题,可是要自己解决这个问题,那么至少须要了解背景知识,所以我忽略同事提供的线索。无论是不是跨域的问题,这个问题告诉我的是浏览器的两个展示不同站点的窗体要进行通信,那么首先要确定的是能否两个站点的窗体能否够通信,鉴于眼下掌握的资料有限。我做了一个大胆的决定——基于自己浅薄的知识储备进行如果,如果两个站点的窗体的javascript(或其它client脚本技术)能够进行通信,那么试想已经打开且成功登陆的支付宝等应用页面后,用户不小心訪问了还有一个危急站点。这个危急站点的javascript找到支付宝网页就获取到敏感信息,那么这样浏览器每次仅仅打开一个才是安全的,由于谁也不知道打开的下一个网页是否有javascript获取自己的敏感信息,而打开的新站点页面也操心浏览器存在的其它站点是否有Javascript获取自己的敏感信息,这种互联网环境人人自危。如果浏览器的两个站点页面不能通信,那么我这个任务就不能完毕了。

       正正是进行了如果。我怀着忐忑不安的心情開始了浏览器内不同站点窗体通信的探索之旅。

既然是浏览器是载体。那么我首先从浏览器入手,浏览器最初是为了解析超文本语言而产生的。而超文本就是html,所以我就了解html技术。了解html技术我常上的站点是www.w3school.com。了解html技术,同一时候今天的html与Javascript技术是密不可分的。我也同一时候了解javascript技术。了解html与javascript过程中。主要了解内置对象和html
dom,由于这两个站点终于到浏览器的是html字符流,而浏览器将html字符流构建html dom树,浏览器的一个窗体的载体就是window对象,我查看了介绍发现opener属性十分显眼,由于opener这个属性能够引用到新创建的窗体对象window,而window对象拥有全局变量、javascript定义。那么不就整整符合自己的需求吗?同一时候也表示一点点操心,是不是说。我从一个站点打开了支付宝而且登录。那么打开支付宝站点的页面就能够获取支付宝站点页面的信息了?如果真的是这样。互联网世界的危急无处不出,可是測试后发现,opener获取到的window对象是有限制的,不能获取document对象等。于是逐个查看浏览器对象,直到document对象的domain属性,这个属性能够返回当前文档的域名。在一个不起眼的提示与凝视找到了人生的希望——提示:domain
属性能够解决因同源安全策略带来的不同文档的属性共享问题。点击这里。了解同源安全策略的具体信息

       总结链接网页的内容是JavaScript 的同源策略。查看了整个文档。我的注意力停留在跨域脚本API訪问那一部分。window.postMessage是一个应用于安全地使用跨源通信的方法。跨源通信的模型是这种。源A窗体对象获取源B窗体对象。使用源B窗体对象调用postMessage方法将数据传送到源B,源B窗体对象须要加入addEventListener进行事件监听,其实两个源还是隔离的,同一时候发送的消息由监听者决定怎样处理。

至此。我的问题已经攻克了。

总结:

   1)做事方式上:遇到问题不能直接就百度、google、bing等,尤其是国内的搜索引擎,垃圾结果一大堆,首先是圈定问题域所在。然后再去查找相关技术知识,提高效率,这些技术知识是对解决方法进行推断的前提。不然你找来的解决的方法可能隐藏着巨bug,同一时候随便百度都能找到的解决的方法的说明仅仅要找一个会百度的人都能够取代你。那么自己的价值体如今什么地方呢?

   2)基础是技术突破关键点,基础扎实能够推理出基于上层实现的技术,举一反三。

javascript跨域訪问探索之旅的更多相关文章

  1. jsonp突破同源策略,实现跨域訪问请求

    版权声明:本文为博主原创文章,未经博主同意不得转载.如需转载请声明:[转自 http://blog.csdn.net/xiaoxian8023 ] https://blog.csdn.net/xiao ...

  2. jquery ajax CORS 跨域訪问 WebService

    JS代码: var word = document.getElementById("word").value; $.ajax({ type: "POST", c ...

  3. 让Apache 和nginx支持跨域訪问

    1,怎样让Apache支持跨域訪问呢? 步骤: 改动httpd.conf,windows中相应的文件夹是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf ...

  4. jquery ajax 跨域訪问样例

    <script type="text/javascript"> $(function(){    $.ajax({    cache : false,    type ...

  5. html5的postmessage实现js前端跨域訪问及调用解决方式

    关于跨域訪问.使用JSONP的方法.我前面已经demo过了.详细见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个很强大的A ...

  6. Android跨进程訪问(AIDL服务)

    我将AndroidAIDL的学习知识总结一下和大家共享 在Android开发中,AIDL主要是用来跨进程訪问. Android系统中的进程之间不能共享内存,因此,须要提供一些机制在不同进程之间进行数据 ...

  7. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  8. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  9. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

随机推荐

  1. 调用wsdl的接口-用axis

    // 创建一个服务(service)调用(call) org.apache.axis.client.Service service = new org.apache.axis.client.Servi ...

  2. 五种算法实现IP到地址的转换

    条件: 给出一个文件,其中每行一个IP段(IPv4,其实IPv6类似,只是规模剧增)及其对应的信息(例如物理地址信息),内容及格式为: <start_IP> <end_IP> ...

  3. Eclipse 生成WebService客户端代码

    1. 打开Eclipse,新建一个普通的Javaproject,然后在新建的项目上右键点击项目,New---->other---->Web Services -------->Web ...

  4. 《Go语言实战》笔记之协程同步 sync.WaitGroup

    原文地址(欢迎互换友链): http://www.niu12.com/article/8 sync 包提供同步 goroutine 的功能 <p>文档介绍</p><cod ...

  5. ISP图像调试工程师——自动白平衡(熟悉3A算法)

    http://blog.csdn.net/wzwxiaozheng/article/details/40586293 https://wenku.baidu.com/view/24632048767f ...

  6. IOS生成证书

    1.生成本地签名文件, 点击此图标,选择证书助理,按照以下步骤生成签名文件,在生成证书时需要导入签名文件生成. 点击继续就能生成签名文件,保存次CSR文件. 2.生成证书 到下面这个页面选择证书的签名 ...

  7. shell的浮点运算

    参考: https://www.linuxquestions.org/questions/linux-software-2/multiply-floats-in-bash-script-618691/ ...

  8. C# 深入理解堆栈、堆在内存中的实现

    尽管在.NET framework下我们并不需要担心内存管理和垃圾回收(GarbageCollection),但是我们还是应该了解它们,以优化我们的应用程序.同时,还需要具备一些基础的内存管理工作机制 ...

  9. 云计算之路-试用Azure:如何建立虚拟机之间的内网连接

    在阿里云上,同一个帐户创建的所有虚拟机(云服务器)之间的内网是直接连通的.而Azure则完全不一样,一开始使用时有点不知所措,后来摸索出来了——在Azure中只有处于同一个虚拟网络(Virtual N ...

  10. Solidworks如何添加齿轮 运动副

    建立下面的齿轮装配关系(注意装配体不要先拖入齿轮,因为我们第一个齿轮是要手动让他转的,所以不能固定)   分别在两个齿轮中绘制两条直线,一个从圆心到齿顶圆,一个从圆心到齿根圆(在零件中绘图完成之后要退 ...