使用JavaScript跳出iframe

Question

我知道如何跳出 iframe，我有一个链接：

<a id="aaa" href="http://localhost/projectManagement/users" target="_parent" >Sign up</a>

点击此链接，我将退出iframe

问题是我想在点击按钮而不是链接时退出iframe。

我知道如何通过按钮单击来执行JavaScript，因此我一直在尝试使用JavaScript执行该链接。

以下是我尝试过的方法：

HTML代码（它位于iframe内部）：

<button onClick="tempEvent();" style="width: 500px; height: 50px; margin-top: -15px; font-size: 20px;">
      <b>
          click me              
       </b>
</button>
<div style="height: 15px;">
</div>
<a id="aaa" href="http://localhost/projectManagement/users" target="_parent" >Sign up</a>

JavaScript

<script>
    function tempEvent()
    {

        clickLink(document.getElementById('aaa'));  // this technique does not work on firefox!
        fireEvent(document.getElementById("aaa"),'click'); // this technique does not work in firefox eather.

        document.getElementById("aaa").onclick(); 
    }

    function clickLink(link) {
        if (document.createEvent) {
            var event = document.createEvent("MouseEvents");
            event.initMouseEvent("click", true, true, window,
                0, 0, 0, 0, 0,
                false, false, false, false,
                0, null);
            link.dispatchEvent(event);
        }
        else if (link.fireEvent) {
           link.fireEvent("onclick");
        }
    }

    function fireEvent(obj,evt){    
        var fireOnThis = obj;
        if( document.createEvent ) {
          var evObj = document.createEvent('MouseEvents');
          evObj.initEvent( evt, true, false );
          fireOnThis.dispatchEvent(evObj);
        } else if( document.createEventObject ) {
          fireOnThis.fireEvent('on'+evt);
        }
    }



</script>

我知道我可以用链接替换按钮，但我不明白为什么不能实现这一点！

编辑：

即使我把链接放在按钮里面也不行！

- Tono Nam

---

你提供的 JavaScript 是在 iframe 内部还是在父级中？ - The Maniac

当我在Chrome浏览器中点击按钮时，我会被重定向并逃离iframe。但是Firefox不会这样做。 - Tono Nam

逃离iframe，几乎有诗意。 - Linus Kleen

Answer 1

父级中的Javascript：

function redirectMe(url) {
    window.location = url;
}

在子iframe中的Javascript：

function tempEvent() {
    parent.redirectMe('http://localhost/projectManagement/users');
}

您可以完全绕过 <a> 标签，整个 clickLink/fireEvent 实际上并不需要。如果您确实需要激活链接的点击事件，请查看 jQuery 和它的 click() 函数。

- The Maniac

Answer 2

<input type="button" onclick="try { window.parent.location.href = "http://example.com"; } catch(e) { }" />

或者，如果您不知道URL或仅希望将URL存储在元素上：

<input type="button" href="http://example.com" onclick="try { window.parent.location.href = this.href; } catch(e) { }" />

请记住，onclick事件并不总是需要指向一个函数。它能够直接从处理程序运行JavaScript代码，尽管大多数人更喜欢使用函数。

注意：我添加了try { } catch(e) { }语句，因为可能存在跨域问题，试图操作父窗口将导致抛出错误。

- Mikett

---

这在大多数浏览器中可能有效，但我认为并不是所有浏览器都支持从子iframe修改父级window全局对象。 - The Maniac

据我所知，所有浏览器都以与普通脚本相同的方式从事件处理程序中运行JavaScript。（当然，除非是像onunload这样的事件。）它不允许你这样做的唯一原因是iframe的域与其父级不同。这正是我添加try { } catch(e) { }语句的确切原因。 - Mikett