Использование CSS для влияния на стиль div внутри iframe

Можно ли изменить стили div, который находится внутри iframe на странице, используя только CSS?

Вам нужен JavaScript. Это то же самое, что и на родительской странице, за исключением того, что перед командой JavaScript необходимо указать имя iframe.

Помните, что применяется та же политика происхождения, что вы можете сделать это только с элементом iframe, который поступает с вашего собственного сервера.

Я использую инфраструктуру Prototype, чтобы сделать это проще:

frame1.$('mydiv').style.border = '1px solid #000000'

или

frame1.$('mydiv').addClassName('withborder')

Короче нет.

Вы не можете применить CSS к HTML, который загружен в iframe, если у вас нет контроля над страницей, загруженной в iframe из-за ограничений междоменного ресурса.

Да. Посмотрите на этот другой поток для деталей: Как применить CSS к iframe?

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

Вы можете извлечь содержимое iframeпервого, а затем использовать jQueryселекторы против них, как обычно.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Удачи!

Быстрый ответ: нет, извините.

Это невозможно, используя только CSS. В основном вам нужно контролировать содержимое iframe, чтобы его стилизовать. Существуют методы, использующие javascript или предпочитаемый вами веб-язык (о котором я немного читал, но не знаком с самим собой) для динамической вставки некоторых необходимых стилей, но вам потребуется прямой контроль над содержимым iframe, которое звучит как у тебя нету.

Используйте Jquery и дождитесь загрузки источника. Вот как я этого добился (использовал угловой интервал, вы можете использовать javascript метод setInterval):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

вероятно, не так, как вы думаете. iframe тоже должен быть <link>в файле css. И вы не можете сделать это даже с JavaScript, если он находится в другом домене.

По-видимому, это можно сделать через jQuery:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

Как сказал Юджин, что-то вроде хакерского поведения. Я закончил тем, что следовал его коду и связывался с моим собственным Css для страницы. Проблема для меня заключалась в том, что, используя временную шкалу твиттера, вы должны обходить щебет, чтобы переопределить их код smidgen. Теперь у нас есть скользящая временная шкала с нашим css, шрифтом IE Larger, правильной высотой строки и скрытой полосой прокрутки для высоты, превышающей их пределы.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Просто добавьте это, и все работает хорошо:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Да, это возможно, хотя и громоздко. Вам нужно будет напечатать / отобразить HTML-код страницы в теле вашей страницы, а затем применить функцию изменения правила CSS. Используя те же примеры, что и выше, вы, по сути, будете использовать метод синтаксического анализа, чтобы найти элементы div на странице, а затем применить к нему CSS-код, а затем перепечатать или повторить его для конечного пользователя. Мне это не нужно, поэтому я не хочу кодировать эту функцию в каждом элементе CSS другой веб-страницы просто для того, чтобы сделать это.

Ссылки:

• Печатное содержание IFRAME
• Доступ и печать исходного кода HTML с использованием PHP или JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Комбинируя различные решения, это то, что сработало для меня.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

Невозможно со стороны клиента. Будет выдано сообщение об ошибке «Ошибка: в доступе к свойству« документ »отказано в доступе», поскольку Iframe не является частью вашего домена. Единственное решение - извлечь страницу из кода на стороне сервера и изменить необходимый CSS.