V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
1314258
V2EX  ›  CSS

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

  •  
  •   1314258 · 2017-03-06 04:41:06 +08:00 · 3849 次点击
    这是一个创建于 2580 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在写一个 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
        1
    binux  
       2017-03-06 04:56:20 +08:00   ❤️ 1
    注释掉了的代码不会被执行
    yansyuei
        2
    yansyuei  
       2017-03-06 05:38:58 +08:00
    一楼已终结此贴
    zhihaofans
        3
    zhihaofans  
       2017-03-06 08:19:31 +08:00 via iPhone
    233
    joshz
        4
    joshz  
       2017-03-06 08:24:23 +08:00 via Android
    刚上知乎看文章说这里逼格高,然后发现了这个
    onionnews
        5
    onionnews  
       2017-03-06 08:41:37 +08:00 via Android
    蛤蛤
    freestyleyooo
        6
    freestyleyooo  
       2017-03-06 09:07:02 +08:00 via Android
    高端的记事本编程嘛,难道注释的代码不会变色
    1314258
        7
    1314258  
    OP
       2017-03-06 14:31:15 +08:00 via iPhone
    @binux
    @yansyuei
    @zhihaofans
    @onionnews
    @freestyleyooo

    谢谢。知道注释掉的是不会执行。我的错,这么懒把注释的也粘贴进去了。我默认以为大家都知道我是执行过这个代码,没起想要的效果,然后想当然的把这个也粘贴进去。
    binux
        8
    binux  
       2017-03-06 19:07:38 +08:00   ❤️ 1
    @1314258 #7 你不说清楚你期望的结果(什么叫不起作用),又不说实际的效果(什么叫不起作用),代码还不完整,无法执行。提问都懒的话,那我也想当然,告诉你个「注释掉了的代码不会被执行」咯。

    于是我不会告诉你,我猜测的另一个原因是 `newIframe.contentDocument.write` 把所有元素都重写了,你不注释掉那些语句也是没用的。
    1314258
        9
    1314258  
    OP
       2017-03-06 22:31:09 +08:00
    @binux 一场误会,是我问问题的逻辑有问题了。感谢你的答案。

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

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

    后头再看看是不是 write 把所有元素都重写了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5321 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 09:04 · PVG 17:04 · LAX 02:04 · JFK 05:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.