iframe overwrites my custom css when it loaded

Question

I'm trying to load iframe, and after it was loaded to inject to it my custom css style. But when I'm loading the page I see my css style appears for a split second and then the iframe finally loaded it overrides my style and it disappears.

I know, I need to wait until the iframe is loaded, and I tried to do so but without any success.

When I'm stopping debugger after execution of the following codeline, I can see the background changes. But then it disappears.

.append('<style> body{background:red;}</style>');

Look at the code snippet.

 (function(){
            var iFrame = $('iframe');
            var contents = iFrame.contents();
            var styleTag = contents.find('head').append('<style> body{background:red;}</style>'); 
        })();

#my-iframe {
            width: 100%;
            height: 600px;
        }
        
        #middle-container {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        #iframe-container {
            width: 100%;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>iFrame Test Page</title>
</head>

<body>
    <div id="middle-container">
        <div id="iframe-container">
            <iframe id="my-iframe"       src="http://www.w3schools.com">
                <p>Sorry! Your browser doesn't support iFrames</p>
            </iframe>
        </div>
    </div>
</body>

</html>

did you try giving ! important on the css styles?

Yashwanth Rao
– Yashwanth Rao

2016-06-22 14:39:38 +00:00
Commented Jun 22, 2016 at 14:39 — Yashwanth Rao
– Yashwanth Rao, Commented Jun 22, 2016 at 14:39

Wes Foster · Accepted Answer · 2016-06-22 14:42:24Z

3

Your code is correct, actually. However, the content will never change and stay changed because you are trying to modify the content of an external resource. Cross-site scripting (security) rules in the browser prevent you from being able to achieve this.

The only way for you to edit the contents of an iframe is to replace the entire contents of the iframe.

Example:

$('iframe').load(function() {
  $('iframe').replaceWith('<p>Replacing everything!</p>');
});

But then it seems rather pointless.

answered Jun 22, 2016 at 14:42

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

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

Comments

Nicolas Bouvrette · Accepted Answer · 2016-06-22 14:56:30Z

0

Why not use jQuery to change the color like this:

https://jsfiddle.net/9vzj7qt8/

 (function(){
            var iFrame = $('iframe');
            var contents = iFrame.contents();
            var styleTag = contents.find('body').css("background-color","red"); 
        })();

answered Jun 22, 2016 at 14:56

Nicolas Bouvrette

4,9312 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

iframe overwrites my custom css when it loaded

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related