CODEWITHSUNDEEP
javascriptjqueryhtmlobjectiframe
LenzDan
LenzDan

Reputation: 11

jquery selector from iframe content to object content

I need the following:

I got a html document, in which I have an iframe and an object. Both, the iframe and the object contain separat html files.

Now I want to click a link in the iframe, and this should affect the links inside the object to hide.

How do I use jQuery selectors to select the links in the object html file?

Structure:

<html file parent>
    <iframe> html site 1 with link to click</iframe>
    <object> html site 2 with links to affect </object>
<html file parent>

Thanks in advance!

Upvotes: 1

Views: 152

Answers (3)

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

If you have control over the iframe's url try this.

First, have a look at window.postMessage. Using this, you may send an event from your iframe to the window parent target. Listening for that event in the window parent (when something in your iframe changed), you will then be able to access any element inside the object tag using a syntax like this:

$('object').contents().find('linkSelector')

Give your iframe an id, let's say myIframe:

<iframe id="myIframe"> html site 1 with link to click</iframe>

Get a reference to the iframe:

var myIframe = document.getElementById('myIframe');

Post a message from iframe:

myIframe.contentWindow.postMessage('iframe.clicked', 'http://your-domain.here.com');

Handler for iframe change:

var handleIframeChange = function(e) {
    //
    if(e.origin == 'http://your-domain.here.com') {
        // Get reference to your `object` tag
        var objContent = $('object').contents();

        // For instance, let's hide an element with a class of `link-class-here`
        objContent.find('.link-class-here').hide();
    }
}

Listen on parent window for the event sent by the iframe:

window.addEventListener('iframe.clicked', handleIframeChange, false);

Haven't tested it right now (did this in the past, when I had control over iframe) but it should work, but as I said, only if you can have control over the iframe.

Upvotes: 0

Strikers
Strikers

Reputation: 4776

For this to possible you need to have control on the url loaded in the iframe.

If it is of same domain then you can probably do that.

Upvotes: 0

doydoy44
doydoy44

Reputation: 5772

This is not possible if the domain of the iframe is different from that of your .
This is a javascript restriction.

Upvotes: 1

Related Questions