Remove inline CSS and size attributes from user-inputted iframe?

Question

I have a channel field that prompts a content editor to copy and paste a Google maps embed code for a specific destination. Using either default EE tag behavior, or jQuery, I'd like to remove certain attributes from the default <iframe> markup-- specifically, the "height", "width" and "style" attributes that Google includes by default in the embed code.

I'm not sure if there's a way to do this via EE, but I tried the following line of jQuery to at least remove the style attribute to no avail:

 $('div.item iframe').removeAttr('style');

Anybody have any ideas as to how I might achieve this? I'm currently overriding the attributes via my stylesheet using important! declarations, but I'd prefer to remove them from the markup entirely, if possible.

Thanks for any insight here.

Answer 1

You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:

var i = $('div.item iframe'); // Did the selector work? console.log(i.length); i.removeAttr('width'); i.removeAttr('height');

That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.

The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.

Answer 2

I am unable to test it right now but I don't think you'll have much luck here. Because the iFrame is essentially a different site you will not be able to use Javascript to manipulate its content due to cross domain issues.

Basically you cannot easily and reliably manipulate a page from domain B using Javascript from domain A.

I don't know if it will fit your exact application but you may want to look at something like Google Maps for ExpressionEngine. This would allow your users to create a map directly on your site rather than pasting in code.

Because the map would be generated on your site you can then use Google Maps styling options to make it look however you wish.

Answer 3

The only way to do it is server-side. You will need to create a custom extension, that will take user's submission for this field and convert it to the form that you like, using regular expressions and some PHP coding.

Answer 4

if You want to add Google Map Width also after remove attribute width, google map will response well.

See the code -

var i = $('div.item iframe'); i.removeAttr('width'); i.css('width','100%');

Thankyou!!!