是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
可能不是你想的那样。在CSS文件中iframe也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。
其他回答
如果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;
...
...
});
只要添加这个,一切都很好:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
简而言之,没有。
您不能将CSS应用于iframe中加载的HTML,除非由于跨域资源限制,您可以控制iframe中加载的页面。
可能不是你想的那样。在CSS文件中iframe也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。
您可以先检索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)); });
好运!