是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?


当前回答

从客户端不可能。一个javascript错误将被提出“错误:权限拒绝访问属性“文档””,因为Iframe不是你的域的一部分。 唯一的解决方案是从服务器端代码中获取页面并更改所需的CSS。

其他回答

结合不同的解决方案,这对我来说是有效的。

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

简而言之,没有。

您不能将CSS应用于iframe中加载的HTML,除非由于跨域资源限制,您可以控制iframe中加载的页面。

简单的回答是:不,对不起。

仅仅使用CSS是不可能的。你基本上需要控制iframe内容,以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点,但我自己不熟悉)来动态插入一些所需的样式,但你需要直接控制iframe内容,这听起来好像你没有。

如果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?

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">