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, Nov 27 '19 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, Nov 27 '19 at 10:44

score 1 · Answer 1 · answered Nov 27 '19 at 17:29

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]

score 1 · Accepted Answer · answered Dec 16 '19 at 07:43

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.

score 0 · Answer 3 · answered Nov 27 '19 at 12:20

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 '19 at 12:20

Prasad

1
3

Removing HTML element in iframe with JavaScript

3 Answers3