Modify CSS of the elements of an iframe using JavaScript

Question

Modify CSS of the elements of an iframe using JavaScript

Navigation

#1 by (1 votes)

1

I would like to know how I can modify the CSS of tags and classes that are within a iframe , I have found solutions in JavaScript, but I am not able to make them work.

Specifically I want to make the links below the pop up that comes out when I click on the flags, the CSS I have:

.ql-snow .ql-editor a {
    text-decoration: none;
    color: brown;
    padding: 10px;
    border: 1px solid brown;
    display: inherit;
    text-align: center;
    border-radius: 3px;
}

I also want to put a background image

.si-content-wrapper {
    background-image: url(http://casonacalderon.com/wp-content/uploads/2017/07/69896840-papyrus-wallpapers.jpeg);
}

But as I say, I'm not able to get to those tags to modify them, I know that through CSS I can not, but I've seen possible solutions in JavaScript.

javascript css iframe

asked by Luis Quesada Romero 16.12.2017 в 18:03

source

1 answer

Help with class instance that contains array of string How do I prevent the content of the page from going too high with the shrunken header?

score 1 · Answer 1

I end up having the same problem, to modify the css of an iframe from JavaScript, it has to be done inside the same page, that is, it is not cross-domain, if you put the code in a .js sheet that after you import to the page, it does not work.

I could apply the style in this mode:

<head>
   <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256- 2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>

<iframe id="iframe1"></iframe>

<script>
  var cssLink = document.createElement("link");
  cssLink.href= "iframe.css";
  cssLink.rel = "stylesheet";
  cssLink.type="text/css";
  $("#iframe1").contents().find("head").append(cssLink);
</script>

I see that the question already has a good time, I hope it can also serve to help someone

Original Answer - in English