`
louis_033
  • 浏览: 5489 次
社区版块
存档分类
最新评论

js iframe跨域访问(同主域/非同主域)分别深入介绍

阅读更多

js跨域是个讨论很多的话题。iframe跨域访问也被研究的很透了。 
一般分两种情况 
一、 是同主域下面,不同子域之间的跨域 
  同主域,不同子域跨域,设置相同的document.domian就可以解决; 
父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容;如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument访问子页面内容; 
  子页访问父页,可以parent.js全局属性 
二、 是不同主域跨域 
  前提,www.a.com下a.html,a.html内iframe调用了www.b.com下的b.html,b.html下iframe调用了www.a.com下的c.html 
  b.html是不无法直接访问a.html的对象,因为涉及到跨域,但可以访问parent,同样c.html的parent可以访问b.html。c.html和a.html同域,是可以访问a下的对象的。parent.parent.js对象! 
  看下面实例: 

**********a.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
</head> 
<body> 
<iframe src="http://www.b.com/b.html" ></iframe> 
<ul id="getText"></ul> 
<script> 
function dosome(text){ 
document.getElementById("getText").innerHTML= decodeURI(text); 
} 
</script> 
</body> 
</html>

 **********b.html

 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
</head> 
<body> 
<iframe id="myfarme" src="###"></iframe> 
<ul id="ct"> 
<li>这里是内容1</li> 
<li>这里是内容2</li> 
<li>这里是内容3</li> 
<li>这里是内容4</li> 
<li>这里是内容5</li> 
<li>这里是内容6</li> 
</ul> 
<script> 
window.onload = function(){ 
var text = document.getElementById('ct').innerHTML; 
document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text); 
} 
</script> 
</body> 
</html>

 **********c.html

 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload = function(){ 
var text = window.location.href.split('=')[1] 
console.log(parent.parent) 
parent.parent.dosome(text); 
} 
</script> 
</head> 
<body> 
ddddddddddd 
</body> 
</html>

 

 

分享到:
评论

相关推荐

    iframe 跨域访问session

    然而,当涉及到跨域时,`iframe` 遇到的问题之一就是无法正常访问父页面或被嵌入页面的`session`。这是因为浏览器的同源策略(Same-Origin Policy)限制了不同源之间的交互,包括`session`和`cookie`。 同源策略是...

    完美解决iframe跨域问题

    3. **iframe跨域问题**:当iframe加载的页面与包含它的页面不在同一个域时,就会出现跨域问题,导致无法直接通过JavaScript进行通信,如获取iframe内的内容、设置iframe的属性等。 **二、iframe跨域的解决方案** 1...

    Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

    iframe跨域访问示例

    在Web开发中,"iframe跨域访问"是一个重要的概念,涉及到浏览器的安全策略和网页的嵌入技术。本文将深入探讨这个主题,以便更好地理解和应用。 首先,我们需要了解什么是iframe。Iframe,全称Inline Frame,是HTML...

    解决JS跨域访问IFrame的解决方案

    在Web开发中,JavaScript(JS)的同源策略限制了不同源之间进行交互,包括从一个页面中的脚本访问另一个不同源的IFrame内容。"解决JS跨域访问IFrame的解决方案"这一主题关注的就是如何克服这个限制,使得在JSP页面中...

    iframe 与主框架相互访问例子,同域、跨域访问例子。

    理解并掌握`iframe`与主框架的同域和跨域访问是非常关键的,这不仅涉及页面内容的嵌入和交互,还涉及到Web应用的安全性和性能优化。在实际开发中,需要根据项目需求和安全考虑来灵活运用这些技术。

    iframe 跨域解决方法

    然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的页面不在同一个域名下时,就会遇到跨域问题。这篇博客将深入探讨如何解决`iframe`的跨域问题。 首先,理解同源策略是至关重要的。同源策略是浏览器...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    iframe跨域访问时session丢失

    NULL 博文链接:https://thoreau.iteye.com/blog/745100

    iframe与主框架跨域相互访问

    本文将深入探讨`iframe`与主框架如何进行同域和跨域访问,并提供相关的解决方案。 同域访问: 在同域环境下,即`iframe`的源URL与包含它的页面URL具有相同的协议、主机名和端口,`iframe`与主框架之间的通信是无...

    iframe跨域调用父窗口js.zip

    在Web开发中,有时我们需要在不同的域之间进行通信,例如在一个网页中内嵌了来自其他域的iframe。这种情况下,由于浏览器的同源策略限制,默认情况下,iframe内容与父页面无法直接交互。但是,通过特定的技术手段,...

    iframe 跨域 自动适应高度

    当一个`iframe`加载的页面与包含它的页面不在同一个源下时,就会遇到跨域问题。为了解决这个问题,我们可以使用以下几种方法: - **CORS(Cross-Origin Resource Sharing)** 设置响应头`Access-Control-Allow-...

    php main 与 iframe 相互通讯类 同域 跨域)

    以上就是PHP主页面与iframe之间进行同域和跨域通信的基本原理和实现方式。通过`FrameMessage.class.php`和JavaScript库,我们可以构建一个健壮的通信框架,无论是在同一域内还是跨越不同的源,都能有效地传递和处理...

    关于iframe跨域POST提交的方法示例

    以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...

    iframe跨域解决方案

    本篇将深入探讨如何解决`iframe`跨域问题。 首先,我们需要了解`iframe`的基本概念。`iframe`全称 Inline Frame,即内联框架,是一种在HTML文档中嵌入另一个HTML文档的方式,常用于加载外部内容,如广告、地图、...

    iframe跨域问题

    iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法

    iframe跨域通信解决方法

    本文档将详细介绍如何在Vue项目或普通Web页面中利用`postMessage`API来实现`iframe`的跨域通信。 #### postMessage API简介 `postMessage`是一个允许不同源窗口之间进行安全通信的浏览器API。它被设计用来解决同源...

Global site tag (gtag.js) - Google Analytics