是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
如果iframe来自另一个服务器,你会有类似的CORS错误:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
只有在你可以控制这两个页面的情况下,你才能使用https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage安全地发送这样的消息:
在你的主站(一个加载iframe的站点):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
在iframe网站上:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
其他回答
简而言之,没有。
您不能将CSS应用于iframe中加载的HTML,除非由于跨域资源限制,您可以控制iframe中加载的页面。
简单的回答是:不,对不起。
仅仅使用CSS是不可能的。你基本上需要控制iframe内容,以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点,但我自己不熟悉)来动态插入一些所需的样式,但你需要直接控制iframe内容,这听起来好像你没有。
是的,这是可能的,尽管很麻烦。您需要将页面的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
只要添加这个,一切都很好:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
可能不是你想的那样。在CSS文件中iframe也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何使用JavaScript代码获得浏览器宽度?
- 加载资源:net::ERR_INSECURE_RESPONSE失败
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 内嵌CSS有什么不好?
- 我如何删除背景图像在css?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 使用域集图例引导
- 向HTML表中添加水平滚动条
- 如何创建表只使用<div>标签和Css
- 如何确保<select>表单字段被禁用时提交?