iframe 相关问题

将 css 样式应用于外部 iframe 内的元素类

我使用 elementor 将以下代码嵌套在 WordPress 网站上的 iframe 内 当前公共活动 十二月... 我使用 elementor 将以下代码嵌套在 WordPress 网站上的 iframe 中 <div class=“container mt-4”> <b>Current Public Events</b> <br> <b>Dec</b> <table> = $0 <tbody> <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr> <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr> <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr> <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr> <tr class=“event” onclick=“window.open(‘scheduler/ViewBooking/6255627?dm=False’)”></tr> </tbody> </table> 我希望 tr 元素的样式设置为 20% 宽并且并排（内联），因为目前它们只是一个列在另一个元素下面，没有样式。 我尝试过以下方法 .event{width:20%!important;display:inline-block!important;} 但这没有任何作用 table > tr .event{width:20%!important;display:inline-block!important;} 什么都不做 网站是 https://sennencommunitycentre.co.uk，iframe 内容位于主滑块图像的正下方，标题为“当前公共事件”，我想对事件容器进行样式设置以占据整个内容如果可能的话，每个事件 tr 的页面宽度为 20% 宽？ 非常感谢 我想你想做这样的事情。如果它对你有用那就太好了： *{box-sizing: border-box;} body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container table { width: 100%; } .container table tbody { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .container table tr { box-sizing: border-box; width: auto; } .container table tr td { border: 1px solid #000; width: 100%; display: inline-block; padding: 5px; } <div class="container mt-4"> <table> <tbody> <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')"> <td>1</td> </tr> <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')"> <td>2</td> </tr> <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')"> <td>3</td> </tr> <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')"> <td>4</td> </tr> <tr class="event" onclick="window.open('scheduler/ViewBooking/6255627?dm=False')"> <td>5</td> </tr> </tbody> </table> </div>

iOS9：如果可能，尝试通过方案打开应用程序，否则重定向到应用程序商店

我的问题只是关于iOS9！ 我有一个 HTML 登陆页面，如果安装了应用程序，我尝试通过 URL 方案将用户重定向到我的应用程序，否则重定向到应用程序商店。 我的代码是：

在 iframe 中渲染 React 组件时如何正确引用本地文档

我有一个调用全局文档的组件。当我在 iframe 中渲染此组件时，它使用当前（父）文档作为参考，而不是 iframe 的文档。 导出 const Moda...

当等效的 DOM 事件侦听器触发更改事件时，什么可能会导致更改事件不以角度触发？

我有一个角度应用程序，其组件具有文件输入，如下所示： 该组件在 mu 之间共享...

有没有办法在嵌入 youtube iframe 的同时仍然让 bfcache 工作？

根据 chrome devtools，youtube iframe 使用媒体设备调度程序，这会阻止 bfcache 为该站点工作。 iframe 的设置方式如下： <p>根据 chrome devtools，youtube iframe 使用媒体设备调度程序，这会阻止 bfcache 为该站点工作。 以下是 iframe 的设置方式：</p> <pre><code>&lt;iframe src=&#34;https://www.youtube.com/embed/{id}&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; web-share&#34; allowfullscreen /&gt; </code></pre> <p>{id} 将替换为视频 ID。</p> </question> <answer tick="false" vote="0"> <p>如果 YouTube 嵌入不在屏幕上，则一个快速的部分解决方案是将 <pre><code>loading=lazy</code></pre> 添加到 iframe。这样，如果用户没有向下滚动那么远，那么它就不会阻止 bfcache 使用。</p> <p>类似地，使用 you 外观来避免加载 YouTube 嵌入，直到用户实际上看起来像他们想要观看视频，也将允许更频繁地使用 bfcache： <a href="https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/#youtube_embedded_player" rel="nofollow noreferrer">https://developer.chrome.com/docs/lighthouse/performance/third-party-facades/#youtube_embedded_player</a></p> <p>但是目前还没有办法完全阻止这种情况。不过，好消息是 Chrome 团队正在研究这些 API，看看是否可以阻止它们阻止 bfcache 的使用。 第一个阻塞原因已经解决：<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1502395" rel="nofollow noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=1502395</a> 在 Chrome Canary 中，您可以看到 MediaDeviceDispatcher 现在没有被列为阻止原因。不幸的是，我有时会看到 YouTube 嵌入使用另一个 API (<pre><code>EmbedderExtensionMessaging</code></pre>)，但并不总是看到这一点，因此至少在 Chrome v122 中可能会部分解决。</p> </answer> </body></html>

如何获取iframe的scrollTop

当window是iframe时，jQuery的scrollTop返回null。有谁能弄清楚如何获取 iframe 的scrollTop 吗？ 更多信息： 我的脚本在 iframe 本身中运行，父级 wi...

在 HTML 源代码中隐藏 iframe url

如何从 HTML 源代码中隐藏 iframe url？

如何防止页面加载时滚动到 iframe？

我的页面中有一个 iframe，当我加载页面时，页面滚动到 iframe 的开头，距页面顶部约 200px。如果我将 iframe 更改为 div 然后页面加载...

如何使用 tailwind css 在 React 中将 iframe 标签居中？

我希望我的 iframe 标签显示在页面中央，但左对齐。 iframe 位于 div 标签内，我尝试在该标签上应用 flex items-center 和 flex justify-content ...

Selenium 无法定位 iframe 元素

我想在iframe中找到输入元素，但是selenium无法找到它。 我同时使用了 switchTo().frame(id) 和 switchTo().frame(index)，但都不起作用。 这是我的代码： d...

是否可以在 Flutter Web iframe 中禁用 Esc 键、单击并启用悬停？

我正在我的 flutter web 应用程序中显示 iframe/url。在此 iframe 中，我只想启用悬停并禁用转义键和单击事件。这可以吗？ 以下是显示的完整代码

传递 CSP 框架祖先

让我们有一个包含一个 的外页，其中包含另一个 <iframe>。 内部页面有一个 Content-Security-Policy 标头，其框架祖先仅允许中间页面...</desc> <question vote="0"> <p>让我们有一个包含一个 <pre><code>&lt;iframe&gt;</code></pre> 的外页，其中包含另一个 <pre><code>&lt;iframe&gt;</code></pre>。</p> <p>内页有一个 <pre><code>Content-Security-Policy</code></pre> 标题，其中 <pre><code>frame-ancestors</code></pre> 只允许中间页。</p> <p>中间页面有一个 <pre><code>Content-Security-Policy</code></pre> 标题，其中 <pre><code>frame-ancestors</code></pre> 只允许外页。</p> <p>此设置是否有效，还是内页必须同时具有 <pre><code>frame-ancestors outer middle</code></pre>？</p> <p>或者 <pre><code>frame-ancestors outer</code></pre> 对于内页来说就足够了吗？这当然不适用于中间页面作为主窗口，但是对于外部页面作为主窗口呢？</p> <pre><code>&lt;body&gt; Outer page my URL is: https://outer &lt;iframe src=&#34;https://middle&#34;&gt; Middle page my URL is: https://middle my SCP frame-ancestors is: outer &lt;iframe src=&#34;https://inner&#34;&gt; Inner page my URL is: https://inner my SCP frame-ancestors is: middle &lt;/iframe&gt; &lt;/iframe&gt; &lt;/body&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>正如规范在 <a href="https://www.w3.org/TR/CSP3/#frame-ancestors-navigation-response" rel="nofollow noreferrer">https://www.w3.org/TR/CSP3/#frame-ancestors-navigation-response</a> 的第一段中所述，如果一个或多个祖先违反了框架，则应阻止它 -祖先指示。这还包括重定向。浏览器中有不同的实现，但预计它在某些浏览器中是可传递的。因此，您需要在框架祖先中设置资源的所有祖先。</p> </answer> </body></html>

透明 Iframe 主体

我需要一个具有动态宽度和高度的（跨域）iframe。 我的问题是， 我可以创建一个 100% 大小和透明背景的 iframe 来显示该 iframe 的父级吗？...

是否可以在网站上嵌入 Facebook 视频？

如何在网站中嵌入Facebook reels？ 嵌入选项仅在 Facebook 视频公开帖子中可见。但在 Facebook 卷轴视频上找不到嵌入选项。我想使用 iframe forface 嵌入它...

如何让WebAuthn在React App iFrame中跨源工作？

我正在尝试使用集成在我的 React 应用程序中的 WebAuthn 并将其用作另一个网站中的 iFrame。 我遇到以下错误： 以下凭证操作只能发生在文档中...

为什么使用 iFrame 进行静默身份验证？

我在多个页面上读到隐藏的 iFrame 用于静默身份验证，但我还不知道为什么。与直接发送 GET 请求相比，使用 iFrame 有什么好处...

移动网络上的 iframe 上的按钮不可点击

我尝试将按钮绝对放置在 iframe 上，但当我在移动网络中查看我的应用程序时，没有注册按钮单击。相反，点击会在下面的 iframe 上注册...

将 JSON 对象发布到 iFrame

我见过将数据发布到 iframe 的不同方法，但我找不到可以仅发送 JSON 对象的方法。所有方法似乎都要求我使用表单元素来放入我的数据。

表格中的 Iframe

我正在尝试在表格的 tbody 部分添加一个 iframe。到目前为止，这是我的代码 <p>我正在尝试在表格的 tbody 部分添加一个 iframe。这是到目前为止我的代码</p> <pre><code>&lt;tbody&gt; &lt;tr&gt; &lt;td&gt;&lt;div&gt; &lt;iframe class=&#34;tabContent&#34; name=&#34;tabIframe2&#34; frameborder=&#34;0&#34;&gt;&lt;/iframe&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; </code></pre> <p>但是，文本不会出现在 iframe 中。它位于 iframe 下方，在我的表格内。我该如何解决这个问题？</p> </question> <answer tick="false" vote="0"> 需要使用 <p> 标签 <pre><code>iframe</code></pre> 才能将另一个 HTML 页面插入到您的页面中。 <a href="http://www.w3schools.com/tags/tag_iframe.asp" rel="nofollow">http://www.w3schools.com/tags/tag_iframe.asp</a></p> <p>使用示例：</p> <pre><code>&lt;iframe src=&#34;http://stackoverflow.com&#34;&gt;&lt;/iframe&gt; </code></pre> <p>您不能在 <pre><code>iframe</code></pre> 标签内编写任何 HTML。</p> </answer> <answer tick="false" vote="0"> <p><pre><code>&lt;iframe&gt;</code></pre> 用于将一个文件嵌入到另一个文件中。在 iframe 所在的文件中，您必须给出要插入的页面的来源。</p> <p>像这样使用它 - <strong>你的文件</strong></p> <pre><code>&lt;tr&gt; &lt;td&gt;&lt;div&gt; &lt;iframe class=&#34;tabContent&#34; name=&#34;tabIframe2&#34; frameborder=&#34;0&#34; src=&#34;test.html&#34;&gt; &lt;/iframe&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; </code></pre> <p><strong>要嵌入“test.html”的文件</strong></p> <pre><code>&lt;p&gt;Text&lt;/p&gt; </code></pre> </answer> </body></html>

如何从 Next.js 中的 iframe 启动 WebXR？

我有一个 Next.js 应用程序 https://codesandbox.io/s/next-js-forked-6fgnr7?file=/index.tsx 当我点击左下角的 AR 按钮时，它应该在 Android Chrome 上打开 WebXR（“在 AR betachten&qu...