Trying to add css styling to iframe with JavaScript

Question

Trying this on Wordpress:

Inside my iframe I have a ._2p3a class I want to change its width to ._2p3a {width: 100% !important;}.

With CSS its not possible to access that class so I am trying with JavaScript:

MY JS CODE:

function hello() {
   let myiFrame = document.getElementById("iframe-css");
   let doc = myiFrame.contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';
}

//the iframe id > "iframe-css"

code Source: https://redstapler.co/how-to-apply-css-to-iframe/

The error:

land_page.js?ver=1.0:4 Uncaught TypeError: Cannot read property 'body' of null
    at hello (land_page.js?ver=1.0:4)
    at HTMLIFrameElement.onload ((index):539)

underlined code:

.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';

Tried: Using CSS to affect div style inside iframe (got errors with all examples "None worked").

I am running this function with onload="hello(this)" on my iframe.

Any other suggestions how I can edit that class to make its width 100%??

score 0 · Answer 1 · answered Sep 28 '20 at 14:52

0

please try bellow code ... I hope you get result:

let myiFrame = document.getElementById("iframe-css").contentWindow;
let doc = myiFrame.document;
doc.body.innerHTML = doc.body.innerHTML + '<style>._2p3a{width: 100% !important;}</style>';

answered Sep 28 '20 at 14:52

Mehrzad Tejareh

635
5
21

Got the following error """land_page.js?ver=1.0:7 Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame. at hello (http://localhost/landing_page/wp-content/themes/betheme-child/land_page.js?ver=1.0:7:24) at HTMLIFrameElement.onload (http://localhost/landing_page/:539:972)""" I think because its a facebook iframe the DOM is blocking my javascript code request – RandomCoder Sep 29 '20 at 06:35
yes its block because its not in your origin but if both of theme (iframe and parrent) in same domain or address it works fine. – Mehrzad Tejareh Sep 29 '20 at 06:38

ElectricShadow · Answer 2 · 2020-09-28T15:04:28.900

0

Adding a <style> element isn't the best way to do this. However, even if it was, you should try to avoid adding elements via innerHTML. It is better to use Document.createElement (document is an instance of Document) and Element.appendChild (all elements are instances of the Element class).

The best way to do this is by directly modifying the style of the elements in the class.

function hello() {
  let myiFrame = document.getElementById("iframe-css");
  let doc = myiFrame.contentDocument ?? myiFrame.contentWindow?.document ?? new Document();
  let elements = doc.getElementsByClassName("2p3a");
  for(let i = 0; i < elements.length; ++i) {
    elements[i].style.width = "100%";
  }
}

Also, the onload attribute sometimes doesn't work on an iFrame. You may have to use the DOM like this:

document.getElementById("iframe-css").onload = hello;

On a side note, you should generally stick to 2 or 4 spaces of indentation in JavaScript, but you chose 3.

edited Sep 28 '20 at 15:04

answered Sep 28 '20 at 14:53

ElectricShadow

683
4
16

Got the following error from this """land_page.js?ver=1.0:9 Uncaught TypeError: Cannot read property 'contentDocument' of null at hello (land_page.js?ver=1.0:9) at land_page.js?ver=1.0:16""" – RandomCoder Sep 29 '20 at 06:30
@RandomCoder Make sure your id is correct. If it is, make sure that `hello` is getting run AFTER the iframe is loaded. Keep in mind that you can only access the iframe's onload AFTER the DOM has been loaded. Maybe this code will fix your issue: `window.onload = () => { document.getElementById("iframe-css").onload = hello; };` If that doesn't fix your issue, try this: `window.onload = hello;` If that STILL doesn't fix your issue, then I'm not sure what to tell you other than to try jQuery's `$(document).ready` method. – ElectricShadow Sep 29 '20 at 12:56

score 0 · Accepted Answer · answered Sep 29 '20 at 07:54

0

Decided to use a different plugin since using the facebook iframe was causing some trouble. With this new plugin everything is working fine so yea.

Thanks to anyone who put effort to answering, I appreciate your help.

answered Sep 29 '20 at 07:54

RandomCoder

395
2
10

Trying to add css styling to iframe with JavaScript

3 Answers3