Проблемы с кросс-браузером, когда CSS применяется к IFrame

Question

У меня есть файл iFrame в моем файле Main.html. Я вызвал child.html из iFrame. <iframe src="child.html" id="frame1"></iframe> (это в файле Main.html)

Мне нужно применить CSS файла Main.html к файлу child.html. Для этого я использую встроенный JavaScript, который находится в main.html.

Код:

function ChangeMe() {
        var cssLink = document.createElement("link")
        cssLink.href = "Main.css";
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
        frames['frame1'].document.body.appendChild(cssLink);
    }

Это прекрасно работает только в IE 8. Я хочу, чтобы это работало во всех браузерах (FF 4, chrome).

Любые предложения !!

Спасибо

Answer 1

Используя jQuery, попробуйте что-то вроде этого:

Если вы используете <link>:

$('body').append('<link rel=StyleSheet href="'+$("link:contains('Main.css')").attr('href')+'" type="text/css" media=screen />');

Если вы используете <style>

$('body').append('<style src="'+$("style:contains('Main.css')").attr('href')+'" type="text/css" media="screen" />');

Я не уверен на 100%, правильно ли работает синтаксис, поскольку у меня не было возможности проверить его. Но это начало. По сути, вы хотите добавить тег <link> или <style> в свой iframe, который содержит href="" или src="" вашего Main.css соответственно.

Редактировать

У вас была возможность закодировать это, вы хотите следующее:

$("#myFrame").contents().find("body").append('<style src="'+$("style[src='some.css']").attr('src')+'"></style>

Проверьте рабочий пример здесь - http://jsfiddle.net/ajthomascouk/erEUW/

Answer 2

Почему бы просто не связать его с дочерним html?Он должен быть объявлен в его голове, так как дочерний HTML в любом случае должен иметь правильный DOM, вы должны включить его и в эту страницу.Это действительно не займет так много вашего веб-сервера, так как браузер распознает, что у него уже есть файл, и будет только тот, который загружен при посещении родительского HTML. РЕДАКТИРОВАТЬ: Хорошо, после некоторой дополнительной информации относительно потребностей этого сценария, вот пример кода сценария, который я написал.Это работает в моей тестовой среде, и я не понимаю, почему это не так в другой:

<script language="javascript">
    function addCSS () {

        // Connect to Child's DOM
        var ifrm = document.getElementById('childFrame');
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;//alert(ifrm.document.getElementsByTagName("head")[0].innerHTML);

        // Get Child's head
        var docHead = ifrm.document.getElementsByTagName("head")[0].innerHTML;

        // Find all Parent's CSS files
        var cssFiles = document.getElementsByTagName("head")[0].getElementsByTagName("link");
        for (i=0; i<cssFiles.length; i++) {

            if (cssFiles[i].getAttribute("type").toLowerCase() == 'text/css') {

                ifrm.document.getElementsByTagName("head")[0].innerHTML = docHead+'\n<link rel="stylesheet" type="text/css" href="'+cssFiles[i].getAttribute("href")+'" />';

            }

        }

    }
    document.getElementById("childFrame").addEventListener("onload", addCSS());
</script>

Примечания:

1) Этот встроенный скрипт должен быть помещен ПОСЛЕ создания iframe.В качестве альтернативы, если вы можете, вы можете добавить атрибут «onload» к самому тегу iframe, вызывая эту функцию, и в этом случае этот встроенный JS должен быть помещен ДО IFrame.Между ними нет.

2) Многие из этих функций будут проще / короче, если вы будете использовать jQuery.Для тех, кто более знаком с JS, совершенно очевидно, что я даже не использовал функцию appendChild (), потому что, по моему опыту, эта функция не всегда работает в кросс-браузерной среде.В этой ситуации я полагаю, что мне это сойдет с рук так, как я это сделал, так как в противном случае мне пришлось бы каждый раз создавать тег link для дочернего элемента, а я теперь просто заполняю строку.

3) Очевидно, это document.getElementsByTagName("head")[0].getElementsByTagName("link") излишне.Однако это гарантирует, что эта строка будет возвращать теги ссылок только из заголовка, а не откуда-либо еще ... на тот случай, если кодировщик родительского скрипта - идиот х).Если вы чувствуете, что эта идиотская защита настолько же излишня, как и вы, вы можете просто использовать document.getElementsByTagName("link") вместо этого.

4) Это добавит ВСЕ CSS-файлы, загруженные в родительский элемент, вашему ребенку.

5) ... Я думаю, что-то забыл, но я не уверен, что ....