CODEWITHSUNDEEP
javascripthtmlgoogle-chromeiframesame-origin-policy
SGH
SGH

Reputation: 75

Blocking Arbitrary Elements from Iframe

Is there any way to block specific HTML elements from being created into an IFrame?

I'm not using JQuery but I don't mind using it.

My base code is like:

<iframe id="id_frame_01" src="somepage"></iframe>
<script type="text/javascript>

frame = document.getElementById('id_frame_01').contentWindow.document;

frame.onload = function(){
    var toremove = frame.getElementsByTagName('iframe');
    toremove.outerHTML = '';
    toremove = frame.getElementsByTagName('object');
    toremove.outerHTML = '';
}

</script>

I have full access to the content of the iframe, but if I try to remove the elements manually after the onload event, the onload event is way too far and the (example) YouTube video starts playing.

I know the IDs of the elements to remove, but I prefer not to use them because a website "update" can break the system. Instead I prefer to filter by elements type.

It is a browser-specific page, Chrome-only.

Is there a way to attach an onchange event to a non-created element?

Is there a way to intercept the loading of the elements?

Upvotes: 1

Views: 263

Answers (1)

Christophe
Christophe

Reputation: 28114

Instead of loading the page directly in an iframe, you could use ajax (or $.ajax with jQuery). This would allow you to filter the page html and inject only the content you want your users to see.

You say you have full access to the iframe content, so I am assuming your implementation follows the same origin policy.

Upvotes: 1

Related Questions