关键词：
【中文标题】如果在 iframe 中以不同方式显示页面（css）【英文标题】：Show page differently (css) if within iframe 【发布时间】：2011-05-20 05:31:06 【问题描述】：有什么办法，正如标题所说的“如果在 iframe 内以不同方式显示页面（css）”。如果站点在 iframe 中，我正在寻找一种 jQuery / JavaScript 方法来可能使用不同的 css 样式表。有什么想法吗？
【问题讨论】：
【参考方案1】：如果窗口不是top window，您可以inject 使用不同的样式表。
if (window.top!=window.self)
// In a Frame or IFrame
else
// Not in a frame
【讨论】：
是否有纯 CSS 方法来完成此操作，或者是否需要通过 JavaScript 检查window.top？
@iX3 - 没有 . CSS 不知道框架。【参考方案2】：
if( self != top )
headTag = document.getElementsByTagName("head")[0].innerHTML;
var frameCSS = headTag + '<style type="text/css">**insert CSS here**</style>';
document.getElementsByTagName('head')[0].innerHTML = frameCSS;
如果页面是唯一显示的页面，top、parent、self 和 window 将相等。如果页面被保存在框架集中，self 和 top 将不相等。如果页面是包含框架集的页面，并且它本身没有被保存在框架集中，则 self 和 top 将相等。
【讨论】：
【参考方案3】：与其注入新样式表，我建议将 CSS 类添加到 body。
jQuery 示例：
$(function()
if (window.self != window.top)
$(document.body).addClass("in-iframe");
);
现在你可以设置不同的样式
.in-iframe p
background: purple;
【讨论】：
^这个。对于大多数实际用途来说，使用一个全新的 css 文件可能是多余的。【参考方案4】：这是一种使用 vanilla JS 的快速且对设计人员友好的方法。只需一行 JS 即可从 CSS/SASS/LESS 控制外观。
在加载任何 CSS 或 JS 之前将其放置在 head 元素中：
// Sets the class of the HTML element using vanilla JavaScript
document.documentElement.className += (window.self == window.top ? " top" : " framed");
然后在您的 CSS/SASS/LESS 中，您可以根据应用的类隐藏、显示和调整。
/* Hide site navigation when in an iframe */
html.framed .site-nav,
html.framed .site-footer
display: none;
PSA：考虑利用X-Frame-Options 来防止您的辛勤工作被劫持。
【讨论】：
这只是整洁、干净且不言自明，我喜欢它！ 这就是我最终这样做的方式。非常聪明的杰里米。简短而简单。如何在 UIscrollView 中以不同方式增加每个页面的高度
】如何在UIscrollView中以不同方式增加每个页面的高度【英文标题】：HowtoincreasetheeachpageheightdifferentlyinUIscrollView【发布时间】：2012-12-1913:55:58【问题描述】：我在单个uiscrollView中有四个页面，并且启用了分页。每个页面可能有不... 查看详情
如何在 GridView 中以不同的方式显示日期？
】如何在GridView中以不同的方式显示日期？【英文标题】：HowtoshowdateindiffrentwayinGridView?【发布时间】：2019-05-0909:38:59【问题描述】：我想将我的grid中的DisplayFormat从"MM/dd/yyyy"到"yyyy/MM/ddhh:mm:ss"但什么也没发生。【问题讨论】：你... 查看详情
在phonegap中以编程方式更改页面(代码片段)
...geHash:true);另一答案我认为你需要使用ajax来改变html页面。如果您正在使用phoneGapapi，那么如果您从一个页面移动到另一个页面，那么我将花费更多时间来加载phoneGapapi。所有的javascript函数再次加载所以我更喜欢你需要使用ajax来加... 查看详情
如何在不同iframe之间传值
...可以正常访问页面元素了；2：$("#ii")[0].contentWindow如果用jquery选择器获得iframe，需要加一个【0】；3：$("#ii")[0].contentWindow.$("#dd").val()可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;4：$("... 查看详情
如何在 PHP 中以不同方式显示静态文本和动态文本（由变量生成）？
】如何在PHP中以不同方式显示静态文本和动态文本（由变量生成）？【英文标题】：Howtodisplaystatictextanddynamictext(generatedbyvariables)differentlyinPHP?【发布时间】：2010-12-2021:03:21【问题描述】：HTML文件由PHP文件生成。一般来说，用户... 查看详情
如果我的网站在 iframe 中，我不希望标题显示在任何页面中
】如果我的网站在iframe中，我不希望标题显示在任何页面中【英文标题】：ifmysiteisinaniframeIdon\'twanttheheadertoshowinanypages【发布时间】：2015-03-2115:39:15【问题描述】：我正在尝试在以下位置找到的解决方案：Hideheaderifiniframe当iframe... 查看详情
请问如何在一个iframe中嵌套并显示另一个iframe
...置允许访问的范围.域名完全不同的无法访问.追问那请问如果在同一个iFrame中操作可以吗？给outerFrame生成一个child，然后把outerFrame的URL传递给这个child。追答看不懂你要表达的意思.如果仅仅是使IFRAME跳转到指定URL,可以直接向IFRAM... 查看详情
如何在列表视图中以不同方式对齐标签
...ription为空时，我希望ItemName垂直居中对齐由于我是新人，如果你 查看详情
在 jQuery UI 对话框中以编程方式创建的 iframe 的大小
】在jQueryUI对话框中以编程方式创建的iframe的大小【英文标题】：SizeprogramaticallycreatediframewithinjQueryUIdialog【发布时间】：2017-02-1114:32:05【问题描述】：我有一个似乎无法解决的问题，我想要一些建议。所以，我在JS中有一个URL。... 查看详情
在 Iframe 页面中添加/更改 css
...站中有一个页面，该页面有一个“内容编辑器”Web部件，显示来自同一域/网站集中的页面。下面的代码（不是我的）我已经放在内容编辑器中，它可以很好地显示 查看详情
iframe与后台交互后，返回页面显示的问题
...页面,则页面的head中增加<basetarget='XXXX'>那个XXXX如果要自己就写_self,如果是整个页面就写_top,不写默认自己.也就是A页面最后默认是在iframe里显示的.如果没有,则你只能是A页面返回到iframe中,然后在A页面加一句javascript在to... 查看详情
js判断页面中的iframe中显示的内容是不是被拉到底部
...示不同内容你是在哪个位置获取iframe中内容的高度的呢？如果是在父页面的话你的语句没有问题，但必须要在iframe中内容加载完成后再获取，你可以用一个按钮来ALERT一下，或者在onload事件里ALERT一下来显示看看获取有没有问题&l... 查看详情
iframe中css无效
...button修改iframe的src）当我一开始打开A的时候iframe的是B，如果这个时候css失效，我刷新页面，css生效。但是当我切换成C的时候，C页面的css还是失效的，我在换回B页面，发现也失效了。。。。。。B和C页面的css的link是一样的参考... 查看详情
如何确定iframe中的页面在该iframe中的默认位置
...显示大小，最后scroll取消滚动，就可以实现页内定位了。如果你试了一下发现没用，那是因为这个边距是作用在页内body上的，你不给body设置position是不会有用的，因为body默认是跟随html整个页面的，永远在顶上霸屏。 参考技术B... 查看详情
jquery如何在html页面取得iframe的元素
...quot;iframe_form"的iframe，iframe里面有个.send，如何选中它如果这个iframe的页面跟a.html是同域名下的，就可以可以来取：获取iframe的页面内容：var$doc=jQuery('iframe').contents();这里的contents()方法就可以iframe页面内任何对象。使用... 查看详情
如何在 Python 中以不同方式处理列表中的最后一个元素？
...的方法吗？数组=[1,2,3,4,5]对于i，枚举（数组）中的val：如果（i+1）==len（数组）：//处理最后一个元素别的：//处理其他元素 查看详情
多个ListViews在android中以编程方式创建
】多个ListViews在android中以编程方式创建【英文标题】：MultipleListViewsCreateprogrammaticallyinandroid【发布时间】：2021-05-3116:18:04【问题描述】：我尝试在android中以编程方式创建n个列表视图。但适配器UI始终显示所有列表视图中的最后... 查看详情
Beautiful Soup 4 CSS 选择器的工作方式与教程显示的方式不同
】BeautifulSoup4CSS选择器的工作方式与教程显示的方式不同【英文标题】：BeautifulSoup4CSSselectordoesnotworkthesamewaythetutorialshow【发布时间】：2013-10-3105:35:47【问题描述】：我从[BeautifulSoup4教程页面][1]运行示例CSS选择器代码，但结果不... 查看详情