编辑iframe内元素的CSS

Question

编辑iframe内元素的CSS

9

我在我的网站上使用了一些免费的Instagram Feed iframe代码，并想要编辑移动设备上图片的尺寸...目前在桌面上，该Feed是2行5张图片。在移动设备上，我想将图片大小增加到50％宽度，这样就可以变成5行2张图片。我打开了控制台，看起来是li.in-tile需要一个width:50%;然而，当您查看该元素的CSS时，它是.lightwidget.in-grid.in-grid-5 li，宽度为20％，但我需要它是50％。

我正在使用Weebly构建网站，如果有帮助，那么是的，我正在插入。

.lightwidget.in-grid.in-grid-5 li{
width:50% !important;
}

在移动设备的媒体查询中，“最大宽度为480像素”。这是我用来调用该源的嵌入代码。

<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/3c1052429c9753bfa460e4a0636864a3.html" id="lightwidget_3c1052429c" name="lightwidget_3c1052429c"  scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

显然当网页呈现该iframe时，它正在调用某处托管的html文档... 我需要知道是否有一种方法可以更改该css。

希望我解释得清楚。

谢谢。

- J.Pyz

你需要设置宽度为50%吗？是吗？ - Vasim Shaikh

2个回答

1

简短回答：不再可能。即使您只使用本地文件，也无法修改iframe内容。

看起来在2010年代的HTML4或HTML5中，用户可以通过JavaScript编辑iframe内容。

然而，我认为从2020年或2022年7月开始，这已经不再可能了。使用HTML5和最新的Web浏览器，例如Firefox Browser 102.0（64位），它不再起作用。我尝试了这些线程中发布的各种解决方案，但它们都没有起作用。

一个解决方案：不要使用JavaScript+iframes。可以使用用户脚本或PHP来更改本地网页或远程网页的CSS。您可以在Greasemonkey（适用于Firefox）中使用用户脚本来更改远程网页的客户端CSS。您可以使用PHP来更改包含在PHP文件中的本地网页的CSS；例如，以下代码在呈现包含在PHP文件中的HTML文件时将所有文本更改为红色：

<html>
[...]
<style>* {color: red;}</style>
[...]
<?php include 'file.html';?>
[...]
</html>

(PHP 也可以修改包含在本地网页中的 .js 脚本。)

- Rublacava

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lux Logica · Accepted Answer

[...] 显然，当网页呈现该iframe时，它会调用某个托管在其他地方的html文档。我需要知道是否有一种方法可以更改那个CSS。

如何为iFrame内的元素设置样式的问题在StackOverflow上已经被提出多次 - 可以在这里查看:

如何应用CSS到iFrame？

另一个讨论它的帖子可以在这里看到:

使用CSS影响iframe内部的div样式

还有一个非常简短的解释在这里:

如何重写iframe内内容的body样式？