在 Iframe 页面中添加/更改 css

Posted 2023-03-06

【中文标题】在 Iframe 页面中添加/更改 css

【英文标题】：adding/ changing css in Iframe page

【发布时间】：2015-09-16 15:08:26

【问题描述】：

我的任务是在 SharePoint 2013 网站上使用这种方法，所以就这样吧。

背景： - 我在 SharePoint 2013 网站中有一个页面，该页面有一个“内容编辑器”Web 部件，显示来自同一域/网站集中的页面。下面的代码（不是我的）我已经放在内容编辑器中，它可以很好地显示页面。

问题 - 我的要求是从我认为使用 iframe 的内容编辑器中的页面中“删除 globalnav”。现在我可以在 IE11 中使用 F12 开发工具并找到下面的 CSS 类 - ms-dialog #globalNavBox 并将显示设置为 "none" 这正是我希望它看起来如何。

我不知道如何在这里实现的唯一一件事是如何通过在显示嵌入页面的页面上使用某种代码来实现这一点。？？

这是我在内容编辑器中用来显示我要修改的页面的代码。

#mydiv

width:1280px; height:1000px;
 overflow:hidden;
 ;


#myframe
 ;
 top:-190px;
 left:-100px;
 width:1080px;
 height:1000px;


</style>
<div id="mydiv">
<iframe id="myframe" src="/gen/genInduction/Lists...blah scrolling="no"></iframe>&#160;</div>

现在我不知道如何添加代码（如果可以的话）以删除 css .ms-dialog #globalNavBox display: none; 以便在显示页面时删除 globalnav。

我希望这是有道理的，因为这是我第一次使用这个网站来提问。在问这个问题之前，我也进行了无休止的搜索，并尝试了各种方法来完成这项工作，但我无法/理解如何实现这一目标。

【问题讨论】：

您无法访问 iframe 中的代码，除非它是您手动注入的代码（并且可以访问 iframe contentWindow 和 contentDocument）。如果您从不同的 url 加载网站作为 iframe 中的嵌入内容：结束。出于安全考虑，你不能对它做任何事情。

是的，正如@Mike 'Pomax' Kamermans 所说，除非您的 iFrame 从与当前站点相同的域加载，否则无法完成。

【参考方案1】：

将以下内容放在页面中 iframe

<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>

【参考方案2】：

我相信您仍然可以访问 iframe 的内容，因为它们都属于同一个域，除非 iframe 是沙盒（示例清楚地表明它不是）。添加到 JBiserkov 的巧妙流线型答案中，这将涵盖加载 iframe 的一些问题。在许多情况下，iframe 可能会有点晚，所以你应该为此做好准备。以下链接帮助我了解 iframe：

Iframes, Onload, and Document.domain

Iframe Tutorials

-对 iframe 的引用

var iFrame = document.getElementById('myframe'),

-引用 iframe 的文档对象

-这个速记条件表达式是访问 iframed 页面内任何内容的关键。

iDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document,

-引用目标元素#globalNavBox

gNav = iDoc.getElementById('globalNavBox');

-加载iframe时，抓取globalNavBox的style为“display”并设置为“none”

iframe.onload = function () 
        gNav.style.display = 'none';
;