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

Question

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 ?

Community · Accepted Answer · 2017-05-23 10:34:08Z

1

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.

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Oct 5, 2016 at 8:16

Sergio Alen

7245 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related