使用CSS影响iframe中的div样式

CSS

斯丁

2020-03-24

是否可以仅使用CSS更改位于页面上iframe内的div的样式？

第3405篇《使用CSS影响iframe中的div样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
凯飞云 2020.03.24

只需添加它，一切都很好：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
小宇宙LEY 2020.03.24

从客户端不可能。由于Iframe不属于您的域，因此将引发JavaScript错误“错误：拒绝访问属性“文档”的权限”。唯一的解决方案是从服务器端代码获取页面并更改所需的CSS。

番长猴子 2020.03.24

可能不是您的思维方式。iframe也必须<link>在css文件中。而且，即使它位于其他域中，您也无法使用javascript做到这一点。

西里Near 2020.03.24

是的，虽然很麻烦，但还是有可能的。您需要将页面的HTML打印/回显到页面的主体中，然后应用CSS规则更改功能。使用上面给出的相同示例，您实际上将使用一种解析方法来查找页面中的div，然后将CSS应用于该div，然后将其重新打印/回显给最终用户。我不需要这个，所以我不想为了另一个功能而将该功能编码到另一个网页的CSS中的每个项目中。

参考文献：

Tom阳光 2020.03.24

快速的答案是：不，对不起。

仅使用CSS是不可能的。基本上，您需要控制iframe内容才能设置其样式。有一些方法可以使用javascript或您选择的网络语言（我已经读过一些，但并不熟悉我自己）动态插入一些所需的样式，但是您需要直接控制iframe内容，听起来就像你没有。

Gil 2020.03.24

您可以先检索内容，iframe然后jQuery像往常一样对它们使用选择器。

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

祝好运！

米亚 2020.03.24

简而言之，没有。

您不能将CSS应用于iframe中加载的HTML，除非由于跨域资源限制而可以控制iframe中加载的页面。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android