Как применить Google Web Font Loader в iframe - PullRequest
Новая
       34

Как применить Google Web Font Loader в iframe

0 голосов
/ 03 февраля 2019

Я работаю над фрагментом кода, который динамически загружает Google Fonts.

Часть содержимого этой страницы загружается в iframe (в том же домене).Я изо всех сил пытаюсь загрузить и применить веб-шрифты в 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 ]

0 голосов
/ 04 февраля 2019

Мне удалось выяснить это сам. 

WebFont.load({
    google: {
        families: [ 'Abel' ]
    },
    context: window.frames[0].frameElement.contentWindow,
}

Это загрузит шрифт в документ внутри iframe.

0 голосов
/ 03 февраля 2019

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>
...