Не удается загрузить CSS iFrame

Я пытаюсь использовать загрузить iFrame на веб-сайте Wordpress. IFrame должен загрузить таблицу, отображаемую в эта ссылка, со всеми примененными цветами и другими стилями.

Однако, когда я вставляю iFrame на свой веб-сайт, это загрузит контент таблицы но не CSS.

Вот как я пытался «принудительно» загрузить правильный CSS, поскольку подозреваю, что тема Wordpress переопределяет CSS таблицы:

<script language = "javascript" type = "text/javascript">
    function iFrameHeight() {
var h = 0;
if (!document.all) {
    h = document.getElementById('blockrandom').contentDocument.height;
    document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if (document.all) {
    h = document.frames('blockrandom').document.body.scrollHeight;
    document.all.blockrandom.style.height = h + 20 + 'px';
    var cssLink1 = document.createElement("link");
    cssLink1.href = "https://www.gscris.it/lmo/lmo-style.css";
    cssLink1.rel = "stylesheet";
    cssLink1.type = "text/css";
    frames['iframe'].document.head.appendChild(cssLink1);
    var cssLink2 = document.createElement("link");
    cssLink2.href = "https://www.gscris.it/lmo/lmo-style-nc.css";
    cssLink2.rel = "stylesheet";
    cssLink2.type = "text/css";
    frames['iframe'].document.head.appendChild(cssLink2);
    }
}
    </script>
    <div>Campioni d'amicizia</div>
        <iframe onload = "iFrameHeight()" id = "blockrandom" name = "iframe" src = "https://www.gscris.it/lmo/lmo.php?todo=&file=Piccamici201819.l98" width = "100%" height = "600" scrolling = "no" align = "top" frameborder = "0">
    Questa scelta non funziona correttamente in quanto il browser utilizzato non supporta gli Inline Frames     </iframe>

Что я делаю неправильно? Это мой страница сайта, куда вставлен iframe (прокрутите вниз).

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
2 077
2

Ответы 2

Используйте HTTPS для обслуживания CSS в iframe. Если вы откроете Chrome Devtools, следующее сообщение об ошибке можно увидеть несколько раз: Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.

Да, это должно быть причиной, попробуй сейчас, дам тебе знать

FET 29.10.2018 14:16

Прежде всего, iframe не будет принимать внешний CSS. поскольку у них есть собственные HTML-теги head и body, это отдельный HTML-документ. вы не можете переопределить какие-либо стили в Iframe. вместо этого вы можете попробовать прикрепить свою таблицу стилей к необходимому документу и использовать ее в iframe.

О, спасибо за разъяснения по поводу моего сомнения. Однако я уверен, что основная проблема заключается в том, что CSS, который я пытаюсь импортировать, не использует HTTPS, попытается исправить это и скоро обновится.

FET 29.10.2018 14:15

Другие вопросы по теме