'Can an iframe use assets from parent page?
I would like to use a font in an iframe which I know will be loaded already in the parent html page: can the iframe css simply refer to it as if the user has it already? or will I have to load it again via @font-face?
Solution 1:[1]
A more general approach complementary to @Mr Lister s comment:
An inline frame (<iframe>) loads another HTML document within your HTML document and embeds it. Simplified you could say it is a website within a website.
The embedded CSS does not interfere with its parents CSS or the other way around since they belong to separate documents and only live within them. As @Mr Lister already pointed out, resources that are referenced in both documents will not be loaded twice.
Any changes to the appearance should be made in the child document itself rather than after loading it in an iframe. You could, however, use JavaScript and its libraries to inject basically anything (stylesheets etc.) into the loaded document. For security reasons browsers generally only allow this for iframes that have to the same domain as the parent. Check out this thread to learn more about injecting via JavaScript: Override body style for content in an iframe.
Solution 2:[2]
CSS does not cascade into documents loaded into iframes, they are separate documents.
You will need to include @font-face in the stylesheet loaded into that document.
The file shouldn't be downloaded again, but loaded from the browser's local cache (assuming the server hosting the font has a reasonable configuration).
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Quentin |