Add CSS to iframe elements using the page .css file

Question

First of all, it seems like there are a lot of posts with the same kind of title, but none of them is focusing on the problem I am facing. That is the reason why I opened this new question, and I hope the title is explicit enought.

I am working on a text-editor on my own, and I was using a <textarea> at first, but I wanted to add various styles to the elements I was writing. After reading a lot of topics about it, I decided to change my <textarea> for an <iframe>.

Before trying anything new with design or whatever, I would like to have the same behaviour with this <iframe> and my previous <textarea>. But I am facing an issue :

My <iframe> element is in a page, index.html, which is linked with a CSS file, style.css. I am able to change the global <iframe> design (like width, height, border...) of the frame in style.css, but I can't add a special design to the elements inside the <iframe> with properties I added in my style.css.

I saw in the inspector that the iframe has a #document before any tag

But even if I tried to add this strange tag to the CSS, the style is not applied to the elements I want to change.

So to be concise, my question is this one : Is it possible to add some style to elements inside an iframe in the stylesheet file of the host page ?

Here are some relevant parts of my code, which shows what I would like to do : add a custom font to the <p> tags inside the <iframe>.

window.onload = function() {
  var frameElement = document.getElementById("text-field");
  var doc = frameElement.contentDocument;
  doc.body.contentEditable = true;
}

html, body {
 margin : 0px;
 background : #f5f5f5;
 font-family: 'Roboto', sans-serif;
}

input:focus, textarea:focus {
 outline: none;
}

.text-editor {
 min-width : 800px;
 width : 1200px; 
 max-width : 1600px;
 min-height : 400px;
 height : 850px;
 max-height : 850px;
 background : #f0f0f0;
 box-shadow : 0px 1px 4px #ccc;
 margin : auto;
 overflow:auto
}

.text-editor .text-field {
 display : block;
 background-color : white;
 min-height : 300px;
 height : 600px;
 max-height : 600px;
 width : 90%;
 margin : auto;
 padding : 5px;
 border: 1px solid #ccc;
}

.text-editor .text-field #document html body {
 font-family: 'Source Code Pro', monospace;
 font-size : 14px;
}

<!DOCTYPE html>

<html>

 <head>
  <title>A Text Editor Project</title>
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 </head>
 
 <body>
  
  <div class="text-editor">
   <iframe class="text-field" id="text-field" src="about:blank" contenteditable="true">
   
   </iframe>
  </div>
 
 </body>

</html>

@Foaster if you tried you read the first answer comments, you would have see that this solution is totally outdated and not valid in HTML5. — Louis 'LYRO' Dupont, Aug 04 '17 at 11:16
@Sanil I want to use an iframe for various reasons, including security ones, since I read a lot of advices on this topic. — Louis 'LYRO' Dupont, Aug 04 '17 at 11:17
@Louis'LYRO'Dupont Hm... no reason to be that offended... The original answer works and is valid HTML5 - as is the accepted answer below. You would have realised it, if you had tried. — Foaster, Aug 04 '17 at 13:12

hairmot · Accepted Answer · 2017-08-04T11:20:45.573

Styles from the parent will not be applied to the document within the iframe. The best solution is to add the stylesheet to the document in the iframe. Either via javascript or creating a template page to load in via src.

Something like:

  var head = doc.head
  var link = doc.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = ...src...
  head.appendChild(link)

in your existing javascript.

I've put together a small example with a style block here

Add CSS to iframe elements using the page .css file

1 Answers1