Removing HTML element in iframe with JavaScript

Question

I'm attempting to remove an image from an embedded iframe (inline iframe). While it works sometimes, sometimes it failes with an error. I am running this code on Chrome. This behaviour is strange. I have tried this on a few sites and I am unable to find any reason for this.

I would like to know why it fails sometimes and does not sometimes with all parameters the same (I'm simply executing this in the console). Secondly, if possible is there an alternative solution?

$("#content_ifr").contents().find("img").remove();

Error message that occurs sometimes:

Uncaught TypeError: Cannot read property 'contents' of null

If it helps, I'm attempting to remove images and extra content from the WordPress page editor (Classic) using JavaScript.

I'm running it in the console after the whole page loads. Like I said it works sometimes and sometimes it does not. The iframe is an inline iframe as well. — Winston Jude
– Winston Jude, Commented Nov 27, 2019 at 10:35
Assuming the iframe is same-origin (meaning the same URL domain), the only reason for this behavior is timing. You probably need to check first if the element actually exists and if it has really loaded. — woxxom
– woxxom, Commented Nov 27, 2019 at 10:44

Jason Owens · Accepted Answer · 2019-11-27 17:29:07Z

1

Being that you said it sometimes works and sometimes it doesn't. When it works, check the Javascript context. I was running into issues where my code worked with DevTools opened, but if I refreshed the page, the javascript context would revert to "Top", and I needed to be in that frame.

[ Javascript context[1]

answered Nov 27, 2019 at 17:29

Jason Owens

5532 gold badges6 silver badges21 bronze badges

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

Comments

Winston Jude · Accepted Answer · 2019-12-16 07:43:30Z

1

Turns out that my Chrome extension was interfering with this. We were attempting to run this script using a Chrome extension on a WordPress site.

Changing these lines to this worked:

jQuery("#content_ifr").contents().find("img").remove();

As @Jason Owens pointed out, the context was for some reason switching. I noticed that using 'jQuery' instead of $ seemed to work. I think this was because the Chrome extension was using standard jQuery as a dependency. However, '$' didn't work WordPress avoids the '$' symbol using noConflict and uses 'jQuery' instead.

answered Dec 16, 2019 at 7:43

Winston Jude

5993 silver badges11 bronze badges

Comments

Prasad · Accepted Answer · 2019-11-27 12:20:35Z

0

We can't remove elements from Iframe but we can hide

Try This:

$(document).ready(function(){
    $('#content_ifr').contents().find('img').hide();
});

answered Nov 27, 2019 at 12:20

Prasad

13 bronze badges

Collectives™ on Stack Overflow

Removing HTML element in iframe with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related