CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Ibounes
Ibounes

Reputation: 107

Can you make it so when the user clicks anywhere inside of an iframe it redirects them to the source url?

So I would like to know if its possible to redirect and open a users tab to the source url's page that the iframe tag is using when they click anywhere inside of the iframe. So instead of them being able to browse the iframe I would like it to automatically open the new tab with the src's url in it.

Here is the code I am working with currently.

<!-- CSS -->

<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">        

    <style>
        body {
    color: purple;
    background-color: #663300 }
    </style>

    <script>
function virtualSubmit(form){
    var text = form.searchtext.value;
    var targets = document.getElementsByTagName('iframe'),
        items = targets.length;

    for(var i = 0; i<items; i++){
        var target = targets[i],
            url = target.getAttribute('data-url');
        target.src = url + text;
    }

    return false;
}
    </script>

    <body>

        <!--The Search bar as well-->
<form onsubmit="return virtualSubmit(this)";>
    <input name="searchtext" type="text" />
    <input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>

    <iframe src="http://www.google.com/custom"
            data-url="http://www.google.com/custom?q="
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>

    <iframe src="http://en.wikipedia.org/wiki"
            data-url="http://en.wikipedia.org/wiki/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>


    <iframe src="http://m.dictionary.com/definition"
            data-url="http://m.dictionary.com/definition/"
            width="250"
            height="600" onmouseover="width=400" onmouseout="width=250"></iframe>

Upvotes: 0

Views: 1662

Answers (1)

jfriend00
jfriend00

Reputation: 708046

Assuming the iframe is a separate domain, you cannot modify the iframe directly. The browser will prevent it because of same-origin protections.

But, depending upon your exact layout, you can sometimes put a transparent div over the top of the iframe (using absolute positioning and z-index), set up event handlers for that div and intercept any click events that the user intended for the iframe and if your desire is to redirect the browser page to somewhere else, you can do that upon one of those clicks.

$(document).ready(function() {
    $("iframe").each(function() {
        var iframe = $(this);
        var pos = iframe.position();
        var div = document.createElement("div");
        var s = div.style;
        s.position = "absolute";
        s.left = pos.left + "px";
        s.top = pos.top + "px";
        s.height = iframe.height() + "px";
        s.width = iframe.width() + "px";
        iframe.parent().append(div);
        $(div).data("src", iframe.attr("src")).click(function() {
            window.location = $(this).data("src");
        });
    });
});

Working demo: http://jsfiddle.net/jfriend00/EB2kh/

I removed the dynamically sizing from the iframes because that complicates the problem for the purposes of showing you the concept, but if you really wanted it to work with that, you could move/resize the divs anytime the iframes were moved/resized.

Upvotes: 1

Related Questions