使用JQuery修改iFrame中内容的CSS [英] Use JQuery to modify CSS for content in an iFrame
问题描述
我的网站上有一个Twitter小部件(一个嵌入iFrame的Javascript小部件).以前，我用
I have a Twitter widget (a Javascript widget that embeds an iFrame) on my site. Previously, I used
iframe[id^='twitter-widget-']{ width:100% !important;}
将窗口小部件的宽度更改为100％，而不是默认的520px.直到昨天，它的工作情况都非常好.不知何故，iframe上的CSS设置不再起作用.我检查了iFrame源代码，看来Twiiter添加了此
to change the widget width to 100%, instead of default 520px. It worked very well until yesterday. For somehow, that CSS setting on iframe does not work anymore. I checked the iFrame source code, it appears Twiiter adds this
.timeline {
max-width: 520px;
}
由于此iframe来自Twitter，因此我无法使用CSS修改.timeline.我尝试使用Jquery/javascript:
Because this iframe is from twitter, I have no way to use css to modify .timeline. I tried to use Jquery/javascript:
$("#twitter-widget-0").contents().find(".timeline").css("max-width","100%");
但是它似乎只能在控制台上使用.我将这行JavaScript放在PHP模板文件中，它不起作用.我已经尝试了 body onLoad ， window onload 和 document onload ，但都没有.我还将这个javascript放在模板文件的末尾，也没有.
But it seems only working on console. I put this line of JavaScript in a PHP template file and it does not work. I have tried body onLoad, window onload and document onload and none works. I also put this javascript at the end of my template file and it does not either.
如何解决此问题?
谢谢
推荐答案
您不能使用JavaScript对任何跨域iFrame进行任何DOM操作！如果iFrame属于同一域，那么您将能够做到这一点！
You can not do any DOM manipulation using JavaScript to any cross domain iFrame! If iFrame is of the same domain than only you will be able to do that!
查看这些相关问题
简而言之，不.除非您可以控制iframe中加载的页面，否则无法将CSS应用于iframe中加载的HTML.
In short, no. You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe.
这篇关于使用JQuery修改iFrame中内容的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
