Використання 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 сторінці через обмеження міжресурсових ресурсів.

Так. Погляньте на цю іншу нитку для детальної інформації: Як застосувати 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 Більшого розміру, правильною висотою лінії та роблячи смугу прокрутки прихованою на висоту, що перевищує їх межі.

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. Використовуючи ті самі приклади, що наведені вище, ви, по суті, використовуєте метод розбору знаків, що знаходяться на сторінці, а потім застосуйте до нього 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");
    }); 
});

Неможливо з боку клієнта. Буде піднята помилка javascript "Помилка: Дозволено заборонено в доступі до" властивостей "" "документа, оскільки Iframe не є частиною вашого домену. Єдине рішення - отримати сторінку з коду сторони сервера та змінити необхідний CSS.