覆盖iframe中内容的正文样式-Java 学习之路

113

如何在 iframe 中控制身体元素的背景图像和颜色？注意，嵌入的body元素有一个类，而 iframe 是属于我的站点的页面 .

我需要这个的原因是我的网站有一个黑色背景分配给身体，然后白色背景分配给包含文本的div . WYSIWYG编辑器在编辑时使用 iframe 嵌入内容，但它不包含div，因此文本很难阅读 .

在编辑器中 iframe 的主体有一个不是't used anywhere else, so I' m的类，假设它被放在那里，所以这样的问题可以解决 . 但是，当我将样式应用于 class.body 时，他们不知道发生了什么！

谢谢

更新 - 我尝试过@mikeq的解决方案，即将类型添加到正文类的类中 . 这在添加到主页的样式表时不起作用，但在使用Firebug添加时它确实有效 . 我假设这是因为Firebug应用于页面上的所有元素，而CSS不应用于iframe中 . 这是否意味着在使用JavaScript加载窗口后添加css会起作用？

10 回答

4
覆盖另一个域iframe CSS

通过使用SimpleSam5's answer的一部分，我用一些Tawk的聊天iframe实现了这一点（他们的customization interface很好，但我需要进一步的自定义） .

在显示在移动设备上的这个特定iframe中，我需要隐藏默认图标并放置我的一个背景图像 . 我做了以下事情：
```
Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};
```
我不拥有任何来自同一父域的Tawk 's domain and this worked for me, thus you may do this even if it'（尽管Sam的回答是Jeremy Becker's comment） .
回复于 2024-05-04T01:21:40+08:00
-2
iframe是页面中的“洞”，显示其中的另一个网页 . iframe的内容不是任何形状或父页面的一部分 .

正如其他人所说，您的选择是：
- 为iframe中加载的文件提供必要的CSS
- 如果iframe中的文件来自与父级相同的域，则可以从父级访问iframe中的文档的DOM .
回复于 2024-05-04T01:21:40+08:00
-21

iframe 具有另一个范围，因此您无法使用javascript访问样式或更改其内容 .

它基本上是“另一页” .

你唯一能做的就是编辑自己的CSS，因为你的全局CSS不能做任何事情 .

回复于 2024-05-04T01:21:40+08:00

此代码使用vanilla JavaScript . 它会创建一个新的 <style> 元素 . 它将该元素的文本内容设置为包含新CSS的字符串 . 它将该元素直接附加到iframe文档的头部 .

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

回复于 2024-05-04T01:21:40+08:00

我有一个blog，我在查找如何调整嵌入式要点的大小时遇到了很多麻烦 . 帖子管理员只允许您编写文本，放置图像和嵌入HTML代码 . 博客布局本身就是响应 . 它无法调整生成的iFrame体内的组件大小 . 所以，这是我的建议：

如果你的iFrame中只有一个组件，即你的要点，你只能调整要点的大小 . 忘了iFrame .

我遇到了视口问题，特定布局到不同的用户代理，这就解决了我的问题：

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

逻辑是基于用户代理设置gist（或您的组件）css . 在应用于查询选择器之前，请务必先识别您的组件 . Feel free to take a look how responsiveness is working .

希望能帮助别人;）

干杯

回复于 2024-05-04T01:21:40+08:00

23
The below only works if the iframe content is from the same parent domain.

以下jquery脚本适合我 . 在Chrome和IE8上测试过 . 内部iframe引用与父页面位于同一域中的页面 .

在这种特殊情况下，我在内部iframe中隐藏了一个具有特定类的元素 .

基本上，您只需将“style”元素附加到内部iframe的“head” .
```
$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});
```
回复于 2024-05-04T01:21:40+08:00
83

您无法更改iframe中显示的页面样式，除非您拥有 direct access ，因此拥有源html和/或css文件的所有权 .

这是为了停止XSS (Cross Site Scripting)

回复于 2024-05-04T01:21:40+08:00
219
也许它现在已经改变了，但是我使用了一个单独的样式表来表示这个元素：
```
.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}
```
成功设置嵌入式youtube iframe的样式...请参阅the blog posts on this page .
回复于 2024-05-04T01:21:40+08:00
7
给iframe页面的正文提供一个ID（或者如果你愿意的话，可以上课）
```
<html>
<head></head>
<body id="myId">
</body>
</html>
```
然后，也在iframe的页面中，为CSS中的背景指定背景
```
#myId {
    background-color: white;
}
```
回复于 2024-05-04T01:21:40+08:00

如果您可以控制托管iframe的页面和iframe的页面，则可以将查询参数传递给iframe ...

以下是根据托管网站是否为移动设备向iframe添加类的示例...

添加iFrame：

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl );

在iFrame里面：

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

回复于 2024-05-04T01:21:40+08:00

覆盖iframe中内容的正文样式

10 回答

覆盖另一个域iframe CSS

相关问题