html - Escape iframe with javascript - Stack Overflow

admin管理员组

文章数量:1277899

I know how to escape the iframe. I have a link:

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

by clicking on that link I will escape the iframe

the problem is that I want to escape the iframe when clicking on a button not a link.

I know how to execute JavaScript with the click of a button so I have been working on executing that link with javascriopt

things I have tried out:

html: (it is inside a 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>

I know I can replace the button with the link but I am just dont understand why I cannot achieve this!

edit

Even if I place the link inside the button it does not work!

I know how to escape the iframe. I have a link:

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

by clicking on that link I will escape the iframe

the problem is that I want to escape the iframe when clicking on a button not a link.

I know how to execute JavaScript with the click of a button so I have been working on executing that link with javascriopt

things I have tried out:

html: (it is inside a 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>

I know I can replace the button with the link but I am just dont understand why I cannot achieve this!

edit

Even if I place the link inside the button it does not work!

• javascript
• html
• iframe

Share Improve this question Follow edited Dec 10, 2011 at 1:23 brainjam 19k88 gold badges6060 silver badges8484 bronze badges asked Dec 10, 2011 at 1:09 Tono NamTono Nam 36.1k8484 gold badges325325 silver badges491491 bronze badges 3

• Is the javascript you gave inside the iframe or within the parent? – The Maniac Commented Dec 10, 2011 at 1:13
• when clicking on the button I get redirected escaping the iframe with the chrome browser. but Firefox does not do it – Tono Nam Commented Dec 10, 2011 at 1:15
• Escape the iframe. It's almost lyrical. – Linus Kleen Commented Dec 10, 2011 at 1:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Javascript in parent:

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

Javascript in child iframe:

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

You can bypass the <a> all together, and the whole clickLink/fireEvent is not really needed. If you did need to activate the click event on a link, check out jQuery and its click() function.

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

Or, if you don't know the url, or simply which to store the url on the element:

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

Remember, the onclick event doesn't always have to refer to a function. It is capable of running JavaScript codes right from the handler, although most prefer functions.

Note: I added the try { } catch(e) { } statement due to possible cross-domain issues in which trying to manipulate the parent window would result in an error being thrown.

本文标签： htmlEscape iframe with javascriptStack Overflow