是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
可能不是你想的那样。在CSS文件中iframe也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。
其他回答
从客户端不可能。一个javascript错误将被提出“错误:权限拒绝访问属性“文档””,因为Iframe不是你的域的一部分。 唯一的解决方案是从服务器端代码中获取页面并更改所需的CSS。
就像尤金说的,一种粗鄙的做事方式。我最终遵循他的代码,并链接到我的自定义Css页面。我的问题是,有了twitter的时间轴,你必须做一些回避twitter来覆盖他们的代码一点点。现在我们有一个滚动的时间轴与我们的css,即更大的字体,适当的行高和使滚动条隐藏的高度大于他们的限制。
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
使用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">
您可以先检索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)); });
好运!