Javascript 有没有办法将IFRAME溢出的内容放到父帧上？
我有一个UI小部件，需要放在一个IFRAME中，这既是出于性能原因，也是为了便于我们将其联合到附属网站。小部件的UI包括显示在其他页面内容顶部的工具提示。请参见下面的屏幕截图或查看其实际操作。有没有办法使IFRAME中的内容与父帧的内容重叠Javascript 有没有办法将IFRAME溢出的内容放到父帧上？,javascript,css,iframe,tooltip,Javascript,Css,Iframe,Tooltip,我有一个UI小部件，需要放在一个IFRAME中，这既是出于性能原因，也是为了便于我们将其联合到附属网站。小部件的UI包括显示在其他页面内容顶部的工具提示。请参见下面的屏幕截图或查看其实际操作。有没有办法使IFRAME中的内容与父帧的内容重叠 据我所知，这是办不到的。为什么不使用XHR请求并填充div呢？不，这是不可能的。忽略任何历史原因，现在它将被视为一个安全漏洞——例如，许多站点将不受信任的内容放入iframe（iframe源是不同的源，因此无法根据同一源策略修改父框架） 如果此类不受信任的内
据我所知，这是办不到的。为什么不使用XHR请求并填充div呢？不，这是不可能的。忽略任何历史原因，现在它将被视为一个安全漏洞——例如，许多站点将不受信任的内容放入iframe（iframe源是不同的源，因此无法根据同一源策略修改父框架）
如果此类不受信任的内容具有将内容放置在iframe边界之外的机制，则它可以（例如）在父框架的真实登录字段上放置“相同”的登录div（或其他内容），从而窃取用户名/密码信息。这很糟糕。这可能是因为它不适合您的要求，或者它实际上可能没有帮助（！），但可能值得一看。它是iframe和div的一种混合体，可能被打包成一个小部件（您最好的选择是给客户端一个
1） 在父文档中查找iframe
2） 从DOM中删除tooltip元素，并将其添加到包含iframe的元素内的父文档中。
3） 您可能需要调整z索引和定位，具体取决于您最初的操作方式 您可以使用parent.document访问iframe的父文档 jQuery(tooltip).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild(tooltip); //adjust z-index, positioning jQuery（工具提示）.remove（）； var-iframeParent=jQuery（“\u-iframe的\u-id\u”，parent.document）[0].parentNode； iframeParent.appendChild（工具提示）； //调整z索引、定位
将当前iframe和建议的div嵌套在父iframe中，然后将父iframe交给第三方，这两个世界都是最好的 我找到了一种解决类似问题的方法，但这要求能够对父内容进行一些修改 快速上下文： 我正在管理一个网站，该网站通过我们自己的API获取一些与合作伙伴相关的数据，并以一种很好的方式呈现这些数据，其中包含许多过滤选项。我们的一些合作伙伴对在他们自己的网站上显示这些数据感兴趣，但对他们中的很多人来说，开发他们自己的UI来显示API数据是他们负担不起的 我们最初建议将用户界面集成到他们网站上的iframe中，但这样一来，数据就无法被外部搜索引擎（如谷歌）索引。 因此，我们转向了相反的原则：我们将他们站点的顶部菜单集成到放置在UI中的iframe中 问题： 它们的标题菜单通常包含一些下拉子菜单。这些子菜单不能溢出iframe高度，因此会被截断 解决方案：
- 将iframe设置为css位置“绝对”，并使用高z索引，以便iframe覆盖父UI
- 在iframe内容中，确定可能溢出iframe框的对象类（在本例中，我们要求菜单所有者向这些元素添加特定的类名，但您可以处理现有类名）
- 获取iframe内容的高度（因此标题的高度不显示任何下拉列表）
- 将初始iframe高度设置为此高度
- 使用与此高度相等的边距移动父UI内容，而不被默认iframe内容覆盖
- 添加一个事件侦听器，当鼠标位于已识别的特定类上时，该侦听器将iframe高度设置为100%。在此状态下，iframe内容可以完全覆盖父内容
- 添加一个事件侦听器，当鼠标离开特定类时，将iframe高度设置回其原始大小。在这种状态下，一切都恢复正常