在iframe页面中添加/更改css

时间:2015-06-30 00:43:43

标签: javascript jquery html css iframe

我的任务是将此方法用于SharePoint 2013网站,所以这里就是这样。

后台: - 我在SharePoint 2013网站中有一个页面,其中有一个“内容编辑器”webpart,显示同一域/网站集中的页面。下面的代码(不是我的)我放在内容编辑器中,它显示页面都很好。

问题 - 我的要求是在内容编辑器中从页面中“删除globalnav”,我认为它正在使用iframe。现在,我可以使用IE11的F12开发工具,找到后面的C​​SS类 - 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。

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

2 个答案:

答案 0 :(得分:1)

在 iframe

之后的页面中放置以下内容
<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>

答案 1 :(得分:1)

我相信您仍然可以访问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的样式设为“display”并设置为“none”

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