`

跨域下获取iframe的父页面URL

 
阅读更多

通常情况下,我们获取iframe父页面的url很简单:parent.location或top.location即可,但前提是它们遵循同源策略。

当iframe与父页面不属于同一个域名时,像上面的获取会因为安全策略原因而失败。在nczonline的一篇文章上看到一种方法,使用document.referrer。

 

方法很简单,通过parent !=window检测iframe与父页面是否同源,当不同源时,使用document.referrer,否则使用parent.location.href

 

function getParentUrl() { var url = null; if (parent !== window) { try {
url = parent.location.href; } catch (e) { url = document.referrer; } }
return url; }

 

当iframe是被动态创建的时候,以上方式依然有效。当然,你也可以使用window.name的方式去做处理。

分享到:
评论

相关推荐

    完美解决iframe跨域问题

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

    iframe 跨域解决方法

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

    Iframe获取父页面的变量和控件

    在网页开发中,有时我们需要在一个页面(子页面)中访问另一个页面(父页面)的数据或控制元素,这种情况下,`Iframe` 提供了一个解决方案。本文将深入探讨如何通过 `Iframe` 获取父页面的变量和控件。 首先,我们...

    iframe子页面获取父页面元素的方法

    在网页开发中,有时我们需要在`iframe`子页面与父页面之间进行交互,例如获取或操作对方的DOM元素。这通常涉及到跨文档通信,因为`iframe`子页面被视为一个独立的文档,它有自己的窗口对象和文档对象模型(DOM)。...

    js实现ifram取父窗口URL地址的方法

    在Web开发中,有时需要在iframe内获取其父页面的URL地址。本文介绍的JavaScript方法,就是如何在iframe中实现获取父窗口URL地址的过程。这一过程利用了JavaScript中的window.parent对象,它是iframe元素与父窗口之间...

    iframe与父页面传值(方法互调)

    而在父页面中,由于`iframe`内容被封装在一个单独的窗口对象中,我们需要先获取到`iframe`的`contentWindow`或`contentDocument`属性,然后才能访问`iframe`中的内容。例如,获取`iframe`内一个名为`iframeFunction`...

    在iframe中调用js父页面和子页面方法

    总结,`iframe`中的JavaScript交互涉及到页面间的通信,无论是父页面调用子页面还是子页面调用父页面,都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术,可以在多页面应用中实现更复杂的功能...

    iframe与父页面传值

    // iframe页面监听消息 window.addEventListener('message', function(event) { if (event.origin !== 'http://parent.com') return; // 验证来源 console.log('Received:', event.data); }, false); ``` 2. 使用...

    iframe父页面获取子页面参数的方法

    在Web开发中,有时我们需要在父页面中操作或者获取嵌入的`iframe`子页面中的数据,例如在一些复杂的交互式应用或者多层框架结构的网页中。标题和描述所提及的是一个具体示例,展示了如何从父页面获取`iframe`子页面...

    iframe父页面获取子页面参数的方法.docx

    在Web开发中,有时我们需要在父页面与嵌入的iframe子页面之间进行交互,例如获取子页面中的某些参数或控制子页面的行为。以下将详细介绍如何在父页面中获取子页面参数的方法。 首先,你需要在父页面上创建一个`...

    跨域修改iframe页面内容详解

    需要将proxy.html放到与内嵌的iframe页同域的服务下, 并且可以被访问到. 使用 支持2种调用方式: 使用 postMessage 和 URL params. postMessage 该方法需要使用 JSON.stringify 将对象转为字符串. // React function...

    js获取IFRAME当前的URL的方法

    需要注意的是,由于同源策略的限制,只有当IFRAME加载的页面与父页面位于同一域名下时,才能通过这种方式获取IFRAME的URL。如果IFRAME加载的内容来自其他域名,浏览器会阻止访问`contentWindow`属性,以防止跨域数据...

    iframe 跨域

    然而,由于浏览器的同源策略限制,当`iframe`加载的页面与包含它的父页面不在同一个域时,就会遇到跨域问题。同源策略是浏览器为了保护用户隐私和安全而实施的一种机制,它限制了来自不同源的“document”之间的交互...

    frame之间以及子页面和父页面间参数传递

    在父页面中可以通过`document.frames["iframeID"].document.getElementById("elementID")`的方式获取到子页面中的元素。例如,在示例代码中,`getChildEl()`函数通过`document.frames("inner").document....

    iframe根据页面内容自适应高度和宽度

    在这个例子中,`src`属性指定了要嵌入的页面URL,`width`和`height`分别设置了`iframe`的宽度和高度。 要使`iframe`自适应内容,我们有以下几种方法: 1. **CSS属性**:`iframe`的`style`属性可以设置`height`和`...

    iframe父向子传值实例.rar

    然而,由于浏览器的同源策略限制,`iframe`内的页面与包含它的父页面在不同源时,不能直接访问彼此的DOM或JavaScript变量,这就引出了"iframe父向子传值"的问题。 在标题"iframe父向值实例.rar"和描述中提到的解决...

    js跨域解决方案

    6. **Window.name与Location.hash**:通过将数据存储在`window.name`属性或URL的hash部分,可以在不同的页面之间传递数据,实现一定程度的跨域。 7. ** CORS-Policy Image**:对于图片资源,可以通过设置图片的`...

    js中iframe调用父页面的方法.docx

    确保`iframe`加载的页面与父页面在同一域名下,以避免跨域问题。如果确实存在跨域问题,可以尝试使用`postMessage`和`message`事件来实现跨域通信。 3. **指定iframe名称进行调用** 如果有多个`iframe`,可以使用`...

    iframe子向父传值实例.rar

    2. **利用URL查询参数**:`iframe`的`src`属性可以携带查询参数,子页面可以通过读取当前页面的URL获取这些参数。父页面可以动态修改`iframe`的`src`,添加或更新查询参数,以此达到传递数据的目的。这种方法适用于...

    解决window.showModalDialog跨域返回值

    为了解决这个问题,我们可以利用`iframe`嵌套页面的技术来实现跨域通信。 首先,我们来看一下`window.showModalDialog`的基本用法。在站点1(系统1的访问页面)中,我们可以通过以下代码弹出一个模态对话框: ```...

Global site tag (gtag.js) - Google Analytics