Iframe är ett mycket bekvämt sätt att visa ett externt innehåll på din webbsida. Det är dock lite komplicerat om du vill lägga till ytterligare eller ändra den befintliga CSS-stilen. Du kan inte helt enkelt lägga till CSS på sidan överordnad/omslag. I den här handledningen visar vi dig hur du använder JavaScript för att injicera CSS i Iframe.
i kodavsnittet nedan, när allt har laddats, får vi Iframe-elementet med ID. Sedan få innehålletdocument och injicera våra stilar i Iframe med innerHTML.,
eller så kan du göra det med jQuery.
$("#myiFrame").on("load", function() { let head = $("#myiFrame").contents().find("head"); let css = '<style>/********* Put your styles here **********</style>'; $(head).append(css);});
exempel
här är till exempel handledningssidan för 3D CSS Progressbar som vi vill lägga till i vår med Iframe.
<iframe width="1024px" height="768px" src="http://127.0.0.1:5501/bar"></iframe>
anta att vi vill ändra längden på förloppsindikatorn till 45%. Tyvärr kan vi inte göra något sådant från vår överordnade CSS.
.bar { width: 45%; /* This will not work */}
låt oss försöka använda JavaScript. Det är viktigt att du måste vänta tills Iframe laddades innan du kan injicera CSS., I det här fallet lägger vi koden i onload event listener.
här är resultatet.
lägga till CSS-fil i iFrame
Du kan lägga till hela CSS-filen istället för att injicera separerade stilar genom att skapa länk och lägga till den i iframe: s huvud.