我们如何在 react.js 中获取 iframe 当前 url答案

【问题标题】：How can we get iframe current url in react.js我们如何在 react.js 中获取 iframe 当前 url
【发布时间】：2021-04-22 11:50:45
【问题描述】：

我正在创建一个简单的反应应用程序。在反应组件中，我使用的是 iframe。现在我想从 iframe 访问当前 URL。当用户单击网站页面链接时，它会转到另一个页面并且 URL 会更改。如何访问该当前 URL？我的代码如下：在 App.Js 文件中

<IframeComponent src="http://scratchpads.org/" height="100%" width="45%"/>

它是组件代码：

 import React from 'react';
export default class IframeComponent extends React.Component {
    myOnloadFunction = () =>{
    console.log(this.props.src)
   // document.getElementById('frame').src =  "http://scratchpads.org/"
    console.log(document.getElementById('frame').src)
//    console.log(document.frames['frame'].document.location)
    }
  render() {  
    return (
      <div>
        <iframe src={this.props.src} height={this.props.height} width={this.props.width}  className="fullheight" onLoad={this.myOnloadFunction} id = "frame"  /> 
      </div>
        )}}

【问题讨论】：

在 iframe 内导航，不会更改 iframe 元素的 src 属性内容。如果 iframe 内容来自不同的来源，则禁止对 iframe 的实际窗口对象实例进行任何访问。因此，如果这是您的情况，那么答案很简单：您想要的，是不可能的。
在某种意义上你能写出示例代码吗？
不，我们不能提供示例代码，因为这是不可能的。

标签： javascript reactjs react-native react-redux react-hooks

【解决方案1】：

你要达到的目的是禁止的，如果 iframe url 不同，则无法更改，也无法访问父网站数据

【讨论】：

有什么方法可以访问react组件中的iframe URL吗？