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


当前回答

是的,这是可能的,尽管很麻烦。您需要将页面的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也必须<link>。如果它在不同的域上,你甚至不能用javascript做到这一点。

是的,这是可能的,尽管很麻烦。您需要将页面的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

您可以先检索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)); });

好运!

如果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;
...
...
  
});

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

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