CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Rafnuss
Rafnuss

Reputation: 119

Embed (iframe or object) and Modify (jQuery) webpage

I'm simply trying to load another webpage in my webpage using the object tag or iframe. Then, I would like to remove some element of the loaded page with jQuery.

Here is my code

<div> 
    <object type="text/html" data="http://ebird.org/ebird/map/eurtre1" width="100%" height="400px" id="eurtre1">
    </object>
 </div>

<script>
jQuery( window ).load(function() {
    jQuery('#map-sidebar').remove();
});
</script>

And, as you guess, it is not working... I have tried:

jQuery('#eurtre1').contents().find('#map-sidebar')

and

jQuery('#eurtre1')[0].contentDocument.children

The wired thing is that on my browser, I can do it in the console, once I've selected the inside of the object...

Any idea ?

Upvotes: 0

Views: 55

Answers (1)

Sergio Alen
Sergio Alen

Reputation: 724

Here's a link to a similar question:

how to access an iframe and affect it with jQuery

Basically you can't due to Javascript same-origin policy but if you have access to the loaded content in the iframe you could use window.postMessage

You could also add a parameter to the iframe's src tag to post a message, something like this:

<iframe src="http://www.example.com?hideElement=true"></iframe>

Again you will have to have access the content of the iframe to check the param and execute your code.

Upvotes: 1

Related Questions