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


当前回答

简而言之,没有。

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

其他回答

是的,这是可能的,尽管很麻烦。您需要将页面的HTML打印/回显到页面主体中,然后应用CSS规则更改函数。使用上面给出的相同示例,本质上是使用在页面中查找div的解析方法,然后对其应用CSS,然后将其重新打印/回显给最终用户。我不需要这个,所以我不想把这个函数编码到另一个网页的CSS中的每一个项目中,只是为了适应。

引用:

IFRAME打印内容 使用PHP或JavaScript访问和打印HTML源代码 http://www.w3schools.com/js/js_htmldom_html.asp http://www.w3schools.com/js/js_htmldom_css.asp

你需要JavaScript。这与在父页面中执行相同,只是必须在JavaScript命令前加上iframe的名称。

请记住,应用同源策略,因此只能对来自您自己服务器的iframe元素执行此操作。

我使用Prototype框架来简化:

frame1.$('mydiv').style.border = '1px solid #000000'

or

frame1.$('mydiv').addClassName('withborder')

使用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);

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

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

从客户端不可能。一个javascript错误将被提出“错误:权限拒绝访问属性“文档””,因为Iframe不是你的域的一部分。 唯一的解决方案是从服务器端代码中获取页面并更改所需的CSS。