change css style of an element by id in iframe with javascript

Question

i want to change color of a <p> that is in an iframe and i tried this:

<script type="text/javascript">
$(document).ready(function() { 
$('iframe').contents().find('#red').css('color','red'); });
</script>

its didn't work. what's the problem?

Sorry I'm a beginner.

Is your iframe on same domain because `.contents()` works if the iframe is on same domain? And have you included jQuery library? — Domain, Dec 27 '14 at 10:08
check if there are more than one iframe in the page you are working on. It's best to use the iframe ID, rather than selecting all iframe elements — agentpx, Dec 27 '14 at 10:10

score 1 · Answer 1 · edited May 23 '17 at 12:12

Here is the complete solution.

Script

<script type="text/javascript">
    $(function(){
        $('#myframe').load(function(){
            $('#myframe').contents().find('#pred').css('color','red'); 
        });
    });
</script>

HTML

<iframe id="myframe" srcdoc="<p id='pred'>Hello</p>">
    <p>Your browser does not support iframes.</p>
</iframe>

The problem occurs only if you try to put the "src" attribute instead of "srcdoc". To find more about it check below link

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

change css style of an element by id in iframe with javascript

1 Answers1