Как применить CSS к iframe? - PullRequest
Новая
       80

Как применить CSS к iframe?

937 голосов
/ 20 октября 2008

У меня есть простая страница с несколькими разделами iframe (для отображения ссылок RSS). Как применить такой же формат CSS с главной страницы к странице, отображаемой в iframe?

Ответы [ 26 ]

1 голос
/ 31 июля 2014

Я думаю, что самый простой способ - добавить еще один div в том же месте, что и iframe, тогда

делает его z-index больше, чем контейнер iframe, так что вы можете легко создать свой собственный div. Если вам нужно щелкнуть по нему, просто используйте pointer-events:none на своем собственном div, чтобы iframe работал, если вам нужно нажать на него;)

Надеюсь, это кому-нибудь поможет;)

0 голосов
/ 04 января 2017

В качестве альтернативы вы можете использовать технологию CSS-in-JS, как показано ниже: lib:

https://github.com/cssobj/cssobj

Может динамически * вставлять объект JS как CSS в iframe

0 голосов
/ 28 октября 2016 

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);
0 голосов
/ 17 октября 2016

Лучший способ может быть следующим (если вы контролируете целевой сайт):

1) установить ссылку iframe с параметром style, например: 

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(последняя фраза a{color:red}, закодированная функцией urlencode.

2) установить страницу получателя target.php следующим образом: 

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........
0 голосов
/ 03 октября 2016

Существует замечательный скрипт , который заменяет узел самой версией iframe. CodePen Демо

enter image description here

Примеры использования: 

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});
0 голосов
/ 08 декабря 2010

Ну, я выполнил следующие шаги:

  1. Div с классом для хранения iframe
  2. Добавить iframe к div.
  3. В файле CSS, 
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Это работает в IE 6. Должно работать в других браузерах, проверьте!

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...