javascript如何获知frame里面跳转过的URL地址

Javascript中，出于安全和隐私考虑，直接获取iframe中跳转后的URL地址不被允许。主要是因为同源策略的限制，该策略是Web安全的基本原则，禁止在不同的源之间进行读取或修改资源。但是，可以通过一些技巧和方法间接获取或判断iframe的URL变化情况，如利用window.postMessage、监听load事件、以及监控hash值变化等。尤其是利用window.postMessage方法，这不仅是安全的方式，还可以绕过同源策略的限制，在两个不同的源之间安全地实现数据的交换。

一、WINDOW.POSTMESSAGE 方法

window.postMessage是HTML5引入的一个非常有用的API，它允许来自不同源之间的窗口通信，无论是父窗口与iframe，还是跨域的窗口之间。通过这个方法，可以安全地实现跨源通信。

使用postMessage进行通信

假设你控制着父页面和iframe的内容，你可以在iframe页面跳转后，从iframe向父页面发送一个消息，这个消息包含了当前的URL。在父页面中，你监听这个消息，从而间接地获取iframe跳转后的URL。

• iframe内部代码：

window.parent.postMessage({

  url: window.location.href
}, '*'); // 注意：'*' 表示接受任何源的消息，实际使用时应该替换为父页面的具体源，提高安全性。

• 父页面代码：

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

  // 验证消息来源的安全性
  if (event.origin !== "http://expected-iframe-origin.com") {
    return;
  }
  console.log("iframe的当前URL是：", event.data.url);
});

二、监听LOAD事件

通过为iframe元素添加load事件监听器，你可以在iframe加载完成后执行一些操作。虽然这不允许直接访问iframe的URL，但可用于触发其他逻辑，比如获取iframe的内容（如果在同源策略允许的情况下）。

实现方法

1. 给iframe添加监听事件：

document.getElementById('myIframe').addEventListener('load', function() {

  // 不能直接访问URL，但可以执行其他操作
  alert('iframe已加载完成');
});

2. 操作iframe内容（仅限同源）：

如需操作iframe内部的内容，可以直接通过contentWindow或contentDocument属性来实现，但这仅限于iframe与父页面遵循同源策略的情况。

三、监控HASH值变化

如果iframe内的跳转只是hash变化（URL的#后面部分），那么可以在父页面通过监测hash变化来间接获取信息。

实现方法

1. window.onhashchange事件：

window.addEventListener('hashchange', function() {

  console.log('当前的hash值是：' + window.location.hash);
});

这种方法只适用于hash变化的场景，它无法告知完整的URL变化，但对于某些应用场景来说，可能已经足够使用。

结语

尽管Javascript由于安全原因限制直接访问iframe中的跳转后的URL地址，但通过一些技巧和策略，我们依然可以在一定程度上实现对iframe导航状态的监控和获取。关键是要在保证Web应用安全性的前提下，合理利用现有的Web技术和API完成需求。

相关问答FAQs：

1. 如何通过JavaScript获取frame中的跳转URL地址？

JavaScript提供了多种方法来获取frame中跳转的URL地址。 你可以使用以下两种方式来实现：

a) 使用contentWindow对象： 你可以通过frame元素的contentWindow属性来获取跳转后的window对象，然后使用该对象的location属性来获取URL地址。例如：

var frame = document.getElementById("yourFrameId");
var frameWindow = frame.contentWindow;
var frameUrl = frameWindow.location.href;

b) 使用contentDocument对象： 你可以通过frame元素的contentDocument属性来获取跳转后的document对象，然后使用该对象的URL属性来获取URL地址。例如：

var frame = document.getElementById("yourFrameId");
var frameDocument = frame.contentDocument || frame.contentWindow.document;
var frameUrl = frameDocument.URL;

2. JavaScript如何监测frame中的URL变化？

你可以使用JavaScript来监测frame中的URL变化，以便在URL发生更改时执行相应的操作。可以通过监听frame的load事件来实现。例如：

var frame = document.getElementById("yourFrameId");
frame.addEventListener("load", function() {
    var frameUrl = frame.contentWindow.location.href;
    // 执行你的操作
});

当frame页面加载完成或者URL发生变化时，load事件将被触发，你可以在事件处理程序中获取frame的新URL地址并执行相关操作。

3. 如何实时获取frame中跳转的URL地址？

如果你想实时获取frame中跳转的URL地址，可以使用定时器来周期性地查询frame的URL。例如：

var frame = document.getElementById("yourFrameId");

setInterval(function() {
    var frameUrl = frame.contentWindow.location.href;
    // 执行你的操作
}, 1000); // 每一秒钟查询一次frame的URL

通过设置一个定时器，不断获取frame的URL地址，你可以实时监测frame中页面跳转的URL变化，并根据需要执行相应的操作。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。