更改 iframe 的宽度答案

【问题标题】：Changing the width of an iframe更改 iframe 的宽度
【发布时间】：2016-07-17 11:15:23
【问题描述】：

我很难尝试更改 twitter 时间线 iframe 的宽度。我查看了开发人员工具检查一个元素并更改了多个元素的宽度，但似乎没有任何效果。

我尝试过改变：

.SandboxRoot, env-wide {
    width: 30%;
}
.timeline-Widget {
    width: 30%;
}
.twitter-timeline, .twitter-timeline-rendered {

    width: 30%;
}

#twitter-widget-0 {

    width: 30%;
}

这是一个小提琴：https://jsfiddle.net/9pnxL6fb/。如果您需要现场查看以进行检查，请告诉我。

为什么我不能根据我使用的元素改变宽度？

【问题讨论】：

jsfiddle.net/9pnxL6fb

标签： javascript html css iframe twitter

【解决方案1】：

您需要定位 #blue div 内的 iframe

#blue iframe {width:30%!important;}

【讨论】：

【解决方案2】：

尝试使用 !important 。我希望它会有所帮助。

#blue {
   width: 30% !important;
 }

【讨论】：

【解决方案3】：

<div id="blue">
<div class="twitter-iframe">
<a class="twitter-timeline"
</div>
</div>

CSS 代码

#blue  {
    width: 100%;
}

.twitter-iframe {
    width: 30%;
}

【讨论】：

【解决方案4】：

如果默认情况下按照 Twitter 提供的尺寸硬编码，您将无法仅使用 CSS 覆盖它。相反，通过更改 js.js 中提供的属性来覆盖。 Twitter widget documentation

【讨论】：

【解决方案5】：

您可以使其工作的一种方法是使用 jQuery 对 CSS 进行一些更改，如下所示：其他答案是半正确的，您可以使用下面的代码覆盖，只是更改 css 可能无法在不同的情况下工作环境。

$(window).on('load', function() {
    $('iframe[id^=twitter-widget-]').each(function () {
        var head = $(this).contents().find('head');
        if (head.length) {
            head.append('<style>.timeline { max-width: 100% !important; width: 100% !important; } .timeline .stream { max-width: none !important; width: 100% !important; }</style>');
    }
        $('#twitter-widget-0').append($('<div class=timeline>'));
    })
});

CSS：

iframe[id^='twitter-widget-0'] {
height:600px !important;
margin-bottom:10px !important;
width:100% !important;
}

工作小提琴：

https://jsfiddle.net/48dy23ep/1/

【讨论】：

我看不出你的小提琴和我的有什么不同？
你指的还有什么环境？我正在尝试在媒体查询中更改它，仅此而已。
在某些情况下，取决于您加载 css 的方式，它可能不会始终自动覆盖 twitter 的 css，但它会等待加载 iframe，然后更改页面上的 css

【解决方案6】：

与其说是网络控制，不如说是一种黑客行为 :-)

通常不可能从父文档中操作 iframe 内容。由于安全原因，这受到保护，不注入任何可疑的 JavaScript 代码等。我正在查看生成帖子的代码。该代码请求一个 twitter API 来获取完整的后生成 JavaScript 文件并将其放入您的 DOM。

唯一的方法是 Twitter 帖子 API，但它是有限的...... (Twitter Widget Javascript)

【讨论】：