iframe 相关问题

页面加载后访问iframe

我试图添加一个 iframe 并在页面加载后连接到谷歌，如下所示 但我从控制台收到了这条消息 参考...

iframe 和 cordova/ionic 后退按钮

我正在使用 iframe 在我的 ionic 视图之一中加载网页。 </ifra...</desc> <question vote="0"> <p>我正在使用 iframe 在我的 ionic 视图之一中加载网页。</p> <pre><code>&lt;iframe name=&#34;siteFrame&#34; id=&#34;siteFrame&#34; src=&#34;www.example.com&#34; style=&#34;width:100%; height:100%&#34; height=&#34;100%&#34; &gt;&lt;/iframe&gt; </code></pre> <p>发生的情况是，当按下后退按钮而不是返回到 iframe 中的上一页时，应用程序存在。 </p> <p>我无法检测到 iframe 的当前 href，因为跨域安全问题阻止了我。</p> <p>我想要做的是手机后退按钮应该在 iframe 上工作，但是当 iframe 位于其主页时，后退按钮应该在视图上工作</p> <p>这怎么办？</p> </question> <answer tick="false" vote="1"> <p>问题是 Cordova 将后退按钮链接到 webviews back 命令，如果它不在 iframe 中返回，则 iframe 永远不会形成您的 webviews 历史记录的一部分（它应该是，但我可能是错的 - 有你完全改变了你的历史记录的运作方式吗？）</p> <p>您可以尝试自己捕获后退动作，并使用它来指示 iframe 返回页面。</p> <p>实现此目的的一种方法是 <pre><code>document.addEventListener(&#34;backbutton&#34;, yourFunctionHere, false);</code></pre>，然后您可以使用 <pre><code>yourFunctionHere</code></pre><pre> 指示 iframe 返回到 </pre><code>iframe.contentWindow.history.back();</code></p> 调用中 <p>我尚未测试上述任何内容，但希望这能为您提供一个可以继续工作的起点。然而，考虑到您正在跨域工作，甚至 back() 命令的访问也可能受到限制，在这种情况下，您可能不走运。</p> <p>您可以在这里找到相关的 Cordova 文档，以防万一：<a href="https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html" rel="nofollow">https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html</a></p> </answer> <answer tick="false" vote="0"> <p>处理 ionic 后退按钮按下事件并从那里导航 iframe。检查下面的链接 <a href="https://sathesh.in/ionic/iframe-and-cordova-ionic-back-button/" rel="nofollow noreferrer">点击这里</a></p> </answer> <answer tick="false" vote="0"> <p>这对我来说是工作！</p> <pre><code>.close{ position: absolute; z-index: 100; background-color: transparent; width: 100%; height: 50px; margin-top: 1.5rem; img{ width: 32px; height: 32px; float: right; margin-right: 1.2rem; margin-top: 1rem; } </code></pre> <p>}</p> <pre><code> .iframe{ position: relative; z-index: 99; } </code></pre> </answer> <answer tick="false" vote="0"> <blockquote> <p>HTML</p> </blockquote> <pre><code>&lt;ion-content&gt; &lt;iframe id=&#34;myIframe&#34; src=&#34;https://example.com&#34; style=&#34;width:100%; height:100%;&#34;&gt;&lt;/iframe&gt; &lt;/ion-content&gt; import { Component, ElementRef, ViewChild } from &#39;@angular/core&#39;; import { GestureController } from &#39;@ionic/angular&#39;; @Component({ selector: &#39;app-your-page&#39;, templateUrl: &#39;./your-page.page.html&#39;, styleUrls: [&#39;./your-page.page.scss&#39;], }) export class YourPagePage { @ViewChild(&#39;myIframe&#39;, { static: true }) myIframe: ElementRef&lt;HTMLIFrameElement&gt;; constructor(private gestureCtrl: GestureController) { } ngAfterViewInit() { const gesture = this.gestureCtrl.create({ el: this.myIframe.nativeElement, gestureName: &#39;swipe&#39;, onMove: (ev) =&gt; this.onSwipe(ev), }); gesture.enable(); } onSwipe(event: any) { // Check for swipe direction (right to left) if (event.deltaX &gt; 50) { this.myIframe.nativeElement.contentWindow.history.back(); } } } </code></pre> <blockquote> <p>要使此方法发挥作用，iframe 内容必须来自同一个 领域。如果是跨域iframe，就会遇到安全问题 限制。确保 iframe 内容来自您自己的域或 您控制的域。</p> </blockquote> </answer> </body></html>

嵌入式 Vimeo (iframe) 全屏无法在 Chrome 中工作

我正在尝试将 vimeo 视频嵌入为 iframe。我正在使用以下代码： <p>我正在尝试将 vimeo 视频嵌入为 iframe。我正在使用以下代码：</p> <pre><code>&lt;iframe width=&#34;1140&#34; height=&#34;570&#34; src=&#34;https://player.vimeo.com/video/553469759?autoplay=1&amp;dnt=1&#34; frameborder=&#34;0&#34; allow=&#34;autoplay; fullscreen; picture-in-picture&#34; allowfullscreen&gt;&lt;/iframe&gt; </code></pre> <p>当我将其粘贴到 codepen 或在 firefox 中尝试时，效果很好。但它对我来说在 Chrome 中不起作用。当我检查 iframe 的 HTML 时，我可以看到 vimeo 添加了一个类 <pre><code>no-fullscreen-support</code></pre>，但它也添加了这些类：</p> <ul> <li><pre><code>js-player-fullscreen</code></pre></li> <li><pre><code>with-fullscreen</code></pre></li> </ul> </question> <answer tick="false" vote="6"> <p>我自己想出来了。 这是由于 Nginx 在标头中设置了 Permissions-Policy。 在我的 Nginx 实例中，最初设置为：</p> <p><pre><code>add_header Permissions-Policy &#34;geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()&#34;;</code></pre></p> <p>本例中的罪魁祸首是<pre><code>fullscreen=(self)</code></pre>——它告诉Chrome，除非代码源自该网站，否则它不应该允许全屏。 由于 Vimeo 的 iframe 是从 player.vimeo.com 加载的，Chrome 会将其视为第三方，因此不允许这样做。从权限策略中删除它，使其看起来像这样：</p> <p><pre><code>add_header Permissions-Policy &#34;geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()&#34;;</code></pre></p> <p>解决了问题。 该按钮现在显示正常。</p> <p>对于那些使用 Apache 的人来说，它可能看起来像这样：</p> <p><pre><code>Header always set Permissions-Policy &#34;geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()&#34;</code></pre></p> <p>同样的原则适用，只是删除<pre><code>fullscreen=(self)</code></pre>。</p> <p>您可能还会看到它被称为“功能策略”，同样的事情，它现在被称为“权限策略”。</p> <p>您可以在此处了解有关权限策略的更多信息：<a href="https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md" rel="noreferrer">https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md</a></p> </answer> <answer tick="false" vote="0"> <h2>来自 <a href="https://vimeo.zendesk.com/hc/en-us/articles/115015759768-Fullscreen-button-missing-from-the-player" rel="nofollow noreferrer">Vimeo 帮助中心</a>：</h2> <p>在无法激活全屏模式的情况下，全屏按钮将对播放器隐藏。以下是一些常见原因：</p> <ul> <li>首先，检查“嵌入”选项卡。确保“控制”部分下的全屏按钮已打开</li> <li>iframe 嵌入代码缺少全屏属性：“mozallowfullscreen”、“webkitallowfullscreen”和“allowfullscreen”。如果您要将嵌入代码粘贴到另一个应用程序中，请确保保留这些值。</li> <li>播放器 iframe 包含在另一个缺少全屏属性的 iframe 中。如果 iframe 包含在没有这些全屏属性的其他 iframe 中，则浏览器不允许 iframe 进入全屏。 - 尝试将播放器插入容器 iframe 外部，或将“mozallowfullscreen”、“webkitallowfullscreen”和“allowfullscreen”添加到容器 iframe。</li> <li>iframe 包含在框架内。 Frame 元素不能进入全屏，其中的任何 iframe 也不能进入全屏。我们建议从页面源代码中删除所有框架标签。</li> </ul> <p>如果您不确定上述情况是否适用，请联系我们，我们将进一步调查。 请务必包含指向嵌入视频的页面的链接，以便我们可以仔细查看您页面的源代码。</p> </answer> <answer tick="false" vote="0"> <p>您应该将这些标签添加到元素中：</p> <pre><code>webkitallowfullscreen mozallowfullscreen allowfullscreen </code></pre> </answer> <answer tick="false" vote="0"> <p>Ayla 的回答也帮助我解决了<pre><code>Apache</code></pre>同样的问题。因此 <pre><code>.htaccess</code></pre> 安全标头阻止了 <pre><code>Chrome</code></pre> 上的全屏按钮。</p> <p>我重写了以下规则</p> <pre><code>Header set Permissions-Policy &#34;fullscreen=(self), autoplay=(self), camera=(self), document-domain=(*), encrypted-media=(self), execution-while-not-rendered=(self), execution-while-out-of-viewport=(self), geolocation=(self)&#34; </code></pre> <p>至</p> <pre><code>Header set Permissions-Policy &#34;fullscreen=(self &#39;https://player.vimeo.com&#39;), autoplay=(self), camera=(self), document-domain=(*), encrypted-media=(self &#39;https://player.vimeo.com&#39;), execution-while-not-rendered=(self), execution-while-out-of-viewport=(self), geolocation=(self)&#34; </code></pre> <p>所以基本上焦点是将<pre><code>fullscreen=(self)</code></pre>替换为<pre><code>fullscreen=(self &#39;https://player.vimeo.com&#39;)</code></pre>。请注意，您也可以定义多个域，如 <pre><code>fullscreen=(self &#39;https://player.vimeo.com https://someotherdomain.com&#39;)</code></pre>。</p> </answer> </body></html>

iframe-resizer getPageInfo 回调和 React 的问题

我遇到了 iframe-resizer 问题，并在使用钩子时做出反应。 我不确定我是否正确地将 getPageInfo 与 useEffect 一起使用。 背景 我在 iframe 中有一个元素，其位置是不同的...

Chrome 扩展程序可以访问 iframe 吗？

如果我编写一个在页面上运行 JS 片段的 Chrome 扩展，它也会在我创建的任何 iframe 中运行吗？ 如果是这样，这是否适用于 DOM 加载后由 Javascript 创建的 iframe？ 那...

沙箱属性同时具有allow-scripts和allow-same-origin的iframe可以逃脱沙箱

无法在 Stripe Payment Elements 中渲染 Google Pay，当我们尝试集成 Stripe Payment Elements 时，即使其美国 IP 地址，Google Pay 也无法渲染， 出现此错误 一个 iframe...

如何处理嵌入在 iframe 中的 ASP.NET MVC 应用程序中的重定向？

我有一个小型 ASP.NET MVC 应用程序，需要通过 iFrame 嵌入到另一个页面中。 同一个控制器上只有 2 个视图： 首页/索引 主页/结果/{id} 当用户在...中输入数据时

如何确保 MutationObserver 在 iframe 发生预期更改之前注册，以便能够检测到它们？这可能吗？

我希望能够观察 iframe 中的突变（来自父文档），以便当某个元素加载到其中时，我可以采取进一步的操作。我还没能得到 MutationObse...

检测透明 iframe 后面的鼠标事件

我正在构建一个 Chrome 扩展，当它处于活动状态时，会将 iframe 附加到页面主体，并设置为固定位置以占据整个窗口尺寸（0, 0 100vw, 100vh）。 iframe 是

iframe.contentWindow.postMessage 在隐身模式下不起作用

我在 AWS S3 存储桶上部署了一个小部件脚本 (widget.js)。此脚本创建一个 iframe，其 src 设置为 http://localhost:5000。 我在我的网络应用程序中使用 script 标签嵌入了 widget.js。一旦

Iframe 在主体内保持滚动

我在模式中有一个 Iframe。我无法为 Iframe 设置固定高度，因为其中的不同页面具有不同的高度。如果我将高度设置为 100%，我的 iframe 高度为 150px，并且我有...

react中各类文档查看器

我想在 React 中制作文档查看器，它在与 Slack Web 应用程序中使用的弹出窗口相同的页面中显示文档？它应该查看所有类型的文档文件。谁能指导我如何...

我可以从父页面验证 iFrame 页面吗？

我有一个简单的 HTML 页面，可以轮流显示在校园周围几台电视上的几个状态页面。我定期更新页面和链接。很多时候页面需要验证...

Iframe 调整 CORS 大小

是否可以将我的 tumblr 网站上的 iframe 大小调整为 100%？ 我已经尝试了很多选项，但仅使用 jQuery 我遇到了 CORS 问题，还尝试了以下插件： https://github.com/Sly777/Iframe-Height-Jq...

高度等于 100% 不适用于 IFrame

接下来是 Stack Overflow 上的一些主题，例如： 全屏iframe高度为100% 如何给 iframe 100% 高度 [重复] 使 Iframe 适合容器剩余高度的 100%...

在 Chrome 扩展中绕过 X-Frame-Options DENY？

我是 Intab 的作者，Intab 是一个 Chrome 扩展，可让您查看内联链接而不是新选项卡。幕后并没有太多花哨的东西，只是一个加载 URL 的 iframe...

godot4 游戏 iframe 加载时的跨源隔离和 SharedArrayBuffer 问题

我使用 godot4 构建了一个游戏并将其托管在 Linux 服务器上。 游戏内服务器.htacess 标头设置 Cross-Origin-Opener-Policy：“same-origin” 标头设置 Cross-Origin-Resource-Policy "

在使用 iframe 显示 pdf 时隐藏 firefox 中的 pdf 工具栏

我正在使用 iframe 在浏览器中显示 pdf 文件。它工作正常，但我想禁用/隐藏 acrobat 工具栏（下图）。 我尝试了解决方案 #toolbar=0&statusbar=0 它在

Iphone 中的 Stripe 3d 安全身份验证流程重定向失败

与 Stripe 合作，我实现了他们的 3d 安全身份验证流程 - https://docs.stripe.com/ payments/3d-secure/authentication-flow#handle-redirect 我遇到的问题是专门针对 han...

如何使用 ReactJS 重新加载 iframe？

我的 ReactJS 组件包含一个 iframe。为了响应外部页面中的事件，我需要重新加载 iframe。如果用户已导航到 iframe 中的另一个页面，我需要将其重置为 URL