是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?


当前回答

是的。看看另一个线程的细节: 如何将CSS应用到iframe?

const cssLink = document.createElement("link");
cssLink.href  = "style.css";  
cssLink.rel   = "stylesheet";  
cssLink.type  = "text/css";  
frames['frame1'].contentWindow.document.body.appendChild(cssLink); 
//     ^frame1 is the #id of the iframe: <iframe id="frame1">

其他回答

结合不同的解决方案,这对我来说是有效的。

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

只要添加这个,一切都很好:

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

简单的回答是:不,对不起。

仅仅使用CSS是不可能的。你基本上需要控制iframe内容,以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点,但我自己不熟悉)来动态插入一些所需的样式,但你需要直接控制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);

就像尤金说的,一种粗鄙的做事方式。我最终遵循他的代码,并链接到我的自定义Css页面。我的问题是,有了twitter的时间轴,你必须做一些回避twitter来覆盖他们的代码一点点。现在我们有一个滚动的时间轴与我们的css,即更大的字体,适当的行高和使滚动条隐藏的高度大于他们的限制。

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