为什么 iframe 里面的 css 不起作用的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2819 天前的主题，其中的信息可能已经有所发展或是发生改变。

在写一个 chrome 的扩展，刚学的。无论怎么搞，好像 css 也不起作用。这个代码作为 content_scripts 运行。

var newIframe = document.createElement('iframe');
newIframe.id = "frameid"
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);

/*
var css = document.createElement("link");
css.href = "http://xxx.com/css.css";
css.rel = "stylesheet";
css.type = "text/css";
frames["frameid"].contentDocument.body.appendChild(css);
*/

newIframe.contentDocument.body.style.backgroundColor = "red";

newIframe.contentDocument.write(printhtml+printhtml2);
newIframe.contentDocument.close();
newIframe.contentWindow.print();

9 条回复 • 2017-03-06 22:31:09 +08:00

binux

2017-03-06 04:56:20 +08:00

注释掉了的代码不会被执行

J0022ZjV7055oN64

2017-03-06 05:38:58 +08:00

一楼已终结此贴

zhihaofans

2017-03-06 08:19:31 +08:00 via iPhone

233

joshz

2017-03-06 08:24:23 +08:00 via Android

刚上知乎看文章说这里逼格高，然后发现了这个

onionnews

2017-03-06 08:41:37 +08:00 via Android

蛤蛤

freestyleyooo

2017-03-06 09:07:02 +08:00 via Android

高端的记事本编程嘛，难道注释的代码不会变色

1314258

2017-03-06 14:31:15 +08:00 via iPhone

@binux
@yansyuei
@zhihaofans
@onionnews
@freestyleyooo

谢谢。知道注释掉的是不会执行。我的错，这么懒把注释的也粘贴进去了。我默认以为大家都知道我是执行过这个代码，没起想要的效果，然后想当然的把这个也粘贴进去。

binux

2017-03-06 19:07:38 +08:00

@1314258 #7 你不说清楚你期望的结果（什么叫不起作用），又不说实际的效果（什么叫不起作用），代码还不完整，无法执行。提问都懒的话，那我也想当然，告诉你个「注释掉了的代码不会被执行」咯。

于是我不会告诉你，我猜测的另一个原因是 `newIframe.contentDocument.write` 把所有元素都重写了，你不注释掉那些语句也是没用的。

1314258

2017-03-06 22:31:09 +08:00

@binux 一场误会，是我问问题的逻辑有问题了。感谢你的答案。

贴完整代码的话，怕大家看得头晕，所以贴了关键代码。把注释代码都贴进去，是代表我执行过， css 文件加载不进去，所以注释掉了。然后 newIframe.contentDocument.body.style.backgroundColor 也没起到作用。就是说，所有 css 都没效果。

发完贴之后，受到 2-6 楼的激励，最终自己搞好了，把 css 的链接也用 write 的方法写进去就好了。

后头再看看是不是 write 把所有元素都重写了。