是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
使用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);
其他回答
您可以先检索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)); });
好运!
简单的回答是:不,对不起。
仅仅使用CSS是不可能的。你基本上需要控制iframe内容,以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点,但我自己不熟悉)来动态插入一些所需的样式,但你需要直接控制iframe内容,这听起来好像你没有。
只要添加这个,一切都很好:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
是的,这是可能的,尽管很麻烦。您需要将页面的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
是的。看看另一个线程的细节: 如何将CSS应用到iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">