iFrame este o modalitate foarte convenabilă de a afișa un conținut extern pe pagina dvs. web. Cu toate acestea, este puțin complicat dacă doriți să adăugați suplimentar sau să modificați stilul CSS existent. Nu puteți adăuga pur și simplu CSS pe pagina părinte/înveliș. În acest tutorial, vă vom arăta cum să utilizați JavaScript pentru a injecta CSS în iFrame.
în fragmentul de mai jos, odată ce totul a fost încărcat, vom obține elementul iFrame prin ID. Apoi obțineți contentDocument și injectați stilurile noastre în iFrame folosind innerHTML.,
sau o puteți face cu jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
exemplu
de exemplu, aici este pagina tutorial CSS Progressbar 3D pe care dorim să o adăugăm la a noastră folosind iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
să Presupunem că vrem să schimbăm lungimea de bara de progres la 45%. Din păcate, nu putem face așa ceva de la CSS-ul nostru părinte.
.bar { width: 45%; /* This will not work */}
Să încercăm să folosim JavaScript. Este important că va trebui să așteptați până când iFrame a fost încărcat înainte de a putea injecta CSS., În acest caz, vom pune codul în onload eveniment ascultător.
iată rezultatul.
Adăugare Fișier CSS pentru iFrame
puteți adăuga întregul fișier CSS în loc de injectare stiluri separate prin crearea de link-ul și adăugați-l la iframe capul lui.