У меня есть веб-сайт с 3 фреймами, встроенными в 3 разных домена. Каждый iframe находится на отдельной странице. Каков наилучший способ применить таблицу стилей ко всем 3 фреймам?
Спасибо!
Это может быть сделано с некоторыми сайтами, но не из-за «той же политики происхождения». Тот, что позволяет, это Twitter. Это важный код.
$('#iframe').each(function(i){ var $head = $(this).contents().find('head'); if ($head.length){ $head.append($("<link/>", { rel: "stylesheet", href: "http://url.to.your.css", type: "text/css" })); } }); Чтобы использовать один и тот же CSS на нескольких страницах, вы должны использовать селектор, который подбирает эти три фрейма $('#iframe1, #iframe2, #iframe3') но помните, что они могут загружаться медленнее, чем другие.
Неважно, находятся ли они на разных страницах, селектор поймает то, что существует.
В следующем примере, который немного сокращает заголовок Twitter по умолчанию, setInterval используется для проверки того, загружен ли iframe, а после его уничтожения.
HTML
<a class="twitter-timeline" style="height:600;" href="#" data-widget-id="your twitter widget id">Tweets</a>
JS
// twitter's own js !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // jquery to insert the css $(function(){ var twitterCssCount = 0; var twitterCss=setInterval(function(){ twitterCssCount++; if (twitterCssCount>10) clearTimeout(twitterCss); $('iframe.twitter-timeline').each(function(i){ var $head = $(this).contents().find('head'); if ($head.length){ $head.append($("<link/>", { rel: "stylesheet", href: "//url.to.your.css", type: "text/css" })); clearTimeout(twitterCss); } }); },1000); });
Содержимое файла CSS
.stream{ height:560px !important; /* because we're removing some of the header */ } .timeline-header{ padding:0 0 5px 0; } .timeline-header .ic-twitter-badge{ border:0; top:7px; right:7px; } h1.summary, h2.byline{ display:none !important; } p.list-description{ padding:5px; padding-bottom:0; margin:0; } .root.customisable-border{ border-color:#666; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }