iframe可以使用父页面中的资源吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe可以使用父页面中的资源吗?相关的知识,希望对你有一定的参考价值。

我想在iframe中使用一个字体,我知道它将在父html页面中加载:iframe css是否可以简单地引用它,好像用户已经拥有它一样?或者我必须通过@ font-face再次加载它?

答案

一种更为通用的方法,补充了@Mr Lister的评论:

inline frame (<iframe>)在HTML文档中加载另一个HTML文档并嵌入它。简化你可以说它是一个网站内的网站。

嵌入式CSS不会干扰其父CSS或其他方式,因为它们属于单独的文档并且只存在于它们之内。正如@Mr Lister已经指出的那样,两个文档中引用的资源不会被加载两次。

外观的任何更改都应该在子文档本身中进行,而不是在将其加载到iframe中之后进行。但是,你可以使用javascript和它的库将任何东西(样式表等)注入到加载的文档中。出于安全原因,浏览器通常仅允许对于与父级具有相同域的iframe。查看此主题以了解有关通过JavaScript注入的更多信息:Override body style for content in an iframe

另一答案

CSS不会级联到加载到iframe中的文档中,它们是单独的文档。

您需要在加载到该文档的样式表中包含@font-face

该文件不应再次下载,而是从浏览器的本地缓存加载(假设托管该字体的服务器具有a reasonable configuration)。

以上是关于iframe可以使用父页面中的资源吗?的主要内容,如果未能解决你的问题,请参考以下文章

我可以从父页面验证 iFrame 页面吗?

iframe子页怎么获取父页的window对象

iframe子页面获取父页面元素和window对象

iframe子页面js调用父页面中的控件报“拒绝访问”是啥原因,怎么解决?先声明不是跨域问题

iframe子页面样式怎么在父页面修改

iframe调用另一个网站的页面问题