如何在iframe中应用
如何在iframe中应用
提问于 2019-02-03 19:12:43
我正在编写一段动态加载Google字体的代码。
该页面的某些内容在iframe中加载(位于相同的域原点上)。我很难在iframe中加载和应用Web字体。我可以访问父文档和iframe。这是我的代码：
<h1>FONT to test</h1>
<p>Another FONT to test</p>
<iframe src="iframe-content.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: [ 'Abel' ]
},
fontactive: function() {
$('h1').css('font-family', 'Abel');
}
});
</script>这是iframe内容代码：
<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>我尝试使用这里概述的"context“变量：https://github.com/typekit/webfontloader
但我没能成功。
提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-04 12:21:02
我自己查出来的。
WebFont.load({
google: {
families: [ 'Abel' ]
},
context: window.frames[0].frameElement.contentWindow,
}这将在iframe中加载文档中的字体。
Stack Overflow用户
发布于 2019-02-03 19:22:07
iframe本质上是它自己的页面，因此它不能从iframe标记所在的页面继承任何东西。
如果将样式代码添加到iframe-content.html中，则应该可以工作。下面是一个示例：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>
<script>
WebFont.load({
google: {
families: [ 'Abel' ]
},
fontactive: function() {
$('h1').css('font-family', 'Abel');
}
});
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54506533
复制相关文章
相似问题
腾讯云开发者
