Fatal编程技术网
  • css/
  • Css 替代iframe中内容的主体样式

Css 替代iframe中内容的主体样式

css iframe

Css 替代iframe中内容的主体样式,css,iframe,styles,overriding,Css,Iframe,Styles,Overriding,如何控制iframe中主体元素的背景图像和颜色？注意，嵌入的body元素有一个类，iframe是属于我的站点的页面 我之所以需要这样做，是因为我的站点将黑色背景指定给正文，然后将白色背景指定给包含文本的div。所见即所得编辑器在编辑时使用iframe嵌入内容，但它不包含div，因此文本很难阅读 当在编辑器中时，iframe的主体有一个在其他任何地方都没有使用过的类，所以我假设它放在那里，这样类似的问题就可以解决了。但是，当我将样式应用于class.body时，它们不会覆盖应用于body的样式。奇

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

我之所以需要这样做，是因为我的站点将黑色背景指定给正文，然后将白色背景指定给包含文本的div。所见即所得编辑器在编辑时使用
iframe
嵌入内容，但它不包含div，因此文本很难阅读

当在编辑器中时，
iframe
的主体有一个在其他任何地方都没有使用过的类，所以我假设它放在那里，这样类似的问题就可以解决了。但是，当我将样式应用于
class.body
时，它们不会覆盖应用于body的样式。奇怪的是，这些风格确实出现在Firebug中，所以我不知道发生了什么

谢谢

更新-我已经尝试了@mikeq的解决方案，在body的类中添加样式。这在添加到主页样式表时不起作用，但在添加Firebug时起作用。我假设这是因为Firebug应用于页面上的所有元素，而CSS不应用于iFrame中。这是否意味着在使用JavaScript加载窗口后添加css会起作用

一个
iframe
有另一个作用域，因此您无法访问它的样式或使用javascript更改它的内容

基本上是“另一页”

你唯一能做的就是编辑它自己的CSS，因为用你的全局CSS你什么都做不了。

除非你有直接访问权，从而拥有源html和/或CSS文件的所有权，否则你不能更改iframe中显示的页面样式

这是为了停止

为iframe页面的主体提供一个ID（或类，如果您愿意）

iframe是页面中的一个“洞”，在其中显示另一个网页。iframe的内容不是父页面的任何形状或组成部分

如其他人所述，您的选择是：

  • 为正在iframe中加载的文件提供必要的CSS
  • 如果iframe中的文件与父对象来自同一域，则可以从父对象访问iframe中文档的DOM
以下内容仅在iframe内容来自同一父域时有效。

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

在这个特殊的例子中，我在内部iframe中隐藏了一个具有特定类的元素

基本上，您只需将
style
元素附加到框架中加载的文档的头部分：

frame.addEventListener（“加载”，ev=>{
const new_style_element=document.createElement（“style”）；
new_style_element.textContent=“.my class{display:none；}”
ev.target.contentDocument.head.appendChild（新的\u样式\u元素）；
});
您还可以使用
链接
元素来引用样式表资源，而不是
样式
元素。
现在可能已更改，但我使用了一个单独的样式表来引用此元素：


.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}



要成功设置嵌入式youtube iFrame的样式，请参阅
 此代码使用普通JavaScript。它创建一个新的
元素。它将该元素的文本内容设置为包含新CSS的字符串。它将该元素直接附加到iframe文档的头部

但是，请记住，不允许访问从另一个来源加载的文档的元素（出于安全原因）
iframe
元素的
contentDocument
在尝试从嵌入该框架的页面的浏览上下文访问时将计算为null


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);


覆盖另一个域
iframe
CSS
通过使用的一部分，我通过一些Tawk的聊天iFrame实现了这一点（它们很好，但我需要进一步定制）

在这个显示在移动设备上的特定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_API.onLoad=function（）{
//如果没有特定的API，您可以尝试使用类似的加载函数
//可能需要设置超时以确保iframe的内容已完全加载
$（“#mtawkchat缩小的iframe元素”）。
contents（）.find（“head”）.append(
$(""+
“#tawkchat状态文本容器{”+
“背景：url(https://example.net/img/my_mobile_bg.png)无重复中心蓝色；”+
“背景大小：100%；”+
"} "+
“#tawkchat状态图标{显示：无}”）
);
};



我不拥有任何Tawk的域，这对我很有用，因此即使它不是来自同一父域，你也可以这样做（尽管Sam回答了）。
如果你控制了承载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 ); 


我有一个问题，我有很多困难找到如何调整我的嵌入式gist。Post manager只允许您编写文本、放置图像和嵌入HTML代码。博客布局本身就是响应性的。它是用Wix建造的。但是，嵌入式HTML不是。我读了很多关于如何在生成的iFrame主体内调整组件大小的文章。因此，我的建议如下：

如果iFrame中只有一个组件，即gist，则只能调整gist的大小。忘掉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>




函数windowSize（）{
设gist=document.querySelector（'gist92442763'）；
设isMobile={
Android:function（）{
return/Android/i.test（navigator.userAgent）
},
黑莓：函数（）{

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 ); 



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



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