在Javascript中从其他框架访问框架的元素答案

【问题标题】：Accessing Element of frame from other frame in Javascript在Javascript中从其他框架访问框架的元素
【发布时间】：2017-03-06 06:28:19
【问题描述】：

如何从其他框架访问框架的元素。例如：

Main.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head> 
    <frameset rows="33%,33%,*">
        <frame class="fra" src="frame1.html"/>
        <frame class="fra" src="frame2.html"/>
    </frameset>
</html>

frame1.html:

<html>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </HEAD>
    <body>
        <b><p id="para"> This is frame one.html </p></b>
    </body>
</html>

frame2.html：

<html>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </HEAD>
    <body>
        <b><p id="para"> This is frame two.html </p></b>
        <button id="but"> Get data </button>
        <script>
            $(document).ready(function(){
                $("#but").click(function(){
                    alert(window.frames[0].document.getElementById('para'));
                });
            });
        </script>
    </body>
</html>

从 frame2 单击按钮后，我需要获取 frame1 中存在的“para”id 元素的数据。所以，我尝试访问如图所示的元素以下。但它不起作用。

    window.frames[0].document.getElementById('para')

它显示错误为：

未捕获的类型错误：无法读取未定义的属性“文档”

所以，window.frames[0] 本身未定义 .谁能帮我解决这个问题？

【问题讨论】：

由于安全性使用父访问父然后其他框架浏览器将阻止该操作，请参阅answer
SecurityError: Blocked a frame with origin from accessing a cross-origin frame的可能重复

标签： javascript jquery html frames

【解决方案1】：

你应该在你的 iframe 上加上 id，比如“iframe1”和“iframe2”。

    <frame class="fra" src="frame1.html" id="frame1" />
    <frame class="fra" src="frame2.html" id="frame2" />

然后：

$(window.parent.document).find("#iframe1").contents().find("#para")

应该允许您从 iframe2 访问第一帧中 id 为“para”的元素。

$(window.parent.document) 将允许您从 iframe2 返回到主文档，然后找到 iframe1，然后 contents() 将允许您进入 iframe1，在那里您将能够找到“#para "元素。

【讨论】：