“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
tableau iframe 嵌入无法识别 Safari 中的信任票证 url
我正在使用 tableau JS API 来操作由我自己的 tableau 服务器实例提供服务的嵌入式 tableau 仪表板。 当我的页面生成带有信任令牌的 url 并调用 新画面.Viz(
Shopify 嵌入式应用程序的 Playwright iframe 连接重置错误
我有一个 Shopify 应用程序部署到 Fly.io 进行 e2e 测试，但在进行初始身份验证设置并保存 storageState 后，我在运行测试时遇到问题。 大多数时候...
如何使用 Python Playwright 从 iframe 检索令牌值？
我正在编写一个使用Python Playwright的脚本来检索网页上的令牌。我能够找到包含它的 iframe，但我正在努力从 iframe 中提取令牌，这是...
这个问题可能看起来很混乱，所以让我澄清一下。 Github 可让您查看存储库中文件的源代码。我想将它们包含在 iframe 中，但我不确定如何并怀疑有人已经这样做了......
我正在尝试将 YouTube 直播聊天嵌入到我网站上的网页上， <p>我正在尝试将 YouTube 直播聊天嵌入到我网站的网页上，</p> <pre><code><iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe> </code></pre> <p>我正在尝试这个，但聊天根本不显示，如果尝试使用我拥有的真实域进行嵌入域，但这也不起作用。</p> </question> <answer tick="false" vote="13"> <p>在我看来，<strong>YouTube 禁用了在外部网站上嵌入实时聊天的功能</strong>，但随后忘记更新文档。或者，可能存在未修复的错误破坏了此功能。</p> <p><strong>2021 更新：聊天嵌入再次起作用。</strong> 使用与以前相同的语法。根据下面<a href="https://stackoverflow.com/questions/52468303/how-to-embed-youtube-livestream-chat/58739531?noredirect=1#comment124100273_58739531">有用的评论</a>。</p> <h2>详情</h2> <p>YouTube 知识库仍然表示，仍然可以使用您发布的 URL 将实时聊天 iframe 嵌入到外部网站中（<a href="https://support.google.com/youtube/answer/2524549?hl=en" rel="nofollow noreferrer">参见此处</a>，在“嵌入实时聊天”部分中）。</p> <p>但是，当尝试这样做并查看浏览器的控制台时，您将看到如下消息：</p> <blockquote> <p>拒绝在框架中显示“https://www.youtube.com/live_chat?v=12345&embed_domain=example.com”，因为它将“X-Frame-Options”设置为“sameorigin”。</p> </blockquote> <p>在查看对 <pre><code>x-frame-options: SAMEORIGIN</code></pre> 请求的响应时，您还可以在浏览器开发人员工具的“网络”选项卡中看到 <pre><code>https://www.youtube.com/live_chat?…</code></pre> 标头。</p> <p>这意味着 YouTube 不希望浏览器将其嵌入到 iframe 中，除非嵌入到 youtube.com 本身。 （在 YouTube 本身上，此嵌入代码仍然有效：当您检查 YouTube 上当前流式传输的任何实时视频的源代码时，您会发现那里的实时聊天窗口是在 iframe 中使用相同的 <pre><code>/live_chat?…</code></pre> 请求创建的。） </p> <p>此功能已被删除的其他指示：</p> <ul> <li><p>YouTube 文档提到：</p> <blockquote> <p>实时聊天模块仅存在于 YouTube 观看页面上 - 它不跟随嵌入式播放器。 （<a href="https://support.google.com/youtube/answer/2524549?hl=en" rel="nofollow noreferrer">来源</a>）</p> </blockquote> <p>我相信这是文档的新部分，下面的“嵌入实时聊天”部分已经过时了。</p> </li> <li><p><a href="https://www.peggyktc.com/2016/05/embed-livestream-and-chat.html" rel="nofollow noreferrer">本教程</a>从 2016 年开始使用记录的 URL 格式在底部附近嵌入示例实时聊天，现在它显示相同的“拒绝在框架中显示 [...]，因为它将 'X-Frame-Options' 设置为‘同源’。”假设这在 2016 年奏效，那么 YouTube 方面肯定发生了一些变化。</p> </li> <li><p>这个 <a href="https://www.reddit.com/r/youtube/comments/9k18fd" rel="nofollow noreferrer">Reddit 帖子</a>讲述了某人的嵌入式实时聊天如何在 2018 年 9 月初突然停止工作——就在这个问题被问到之前不久。</p> </li> </ul> <h2>替代品</h2> <ul> <li><p>您可以使用 YouTube Livestream API，特别是 <a href="https://developers.google.com/youtube/v3/live/docs/liveChatMessages" rel="nofollow noreferrer">LiveChatMessages</a> 端点来获取和创建聊天消息。可能有开源库可以帮助解决这个问题。到目前为止，我找到了<a href="https://github.com/yuta0801/youtube-live-chat" rel="nofollow noreferrer">这个</a>（可以显示但不能创建聊天消息）。</p> </li> <li><p>您可以嵌入自己的聊天，可以安装在您自己的服务器上，也可以安装在<a href="https://www.dacast.com/blog/best-live-chat-with-html5-video-player-solutions/" rel="nofollow noreferrer">云托管的实时流聊天解决方案</a>。该解决方案还可以提供 YouTube 实时聊天不提供的功能，例如允许匿名访问者发帖。</p> </li> <li><p>您可以反向代理 <pre><code>https://www.youtube.com/live_chat?…</code></pre> URL，转发 YouTube 的响应，但删除 X-Frame-Options 标头。</p> </li> <li><p>如果您只需要一台或多台计算机的解决方案，您可以使用浏览器扩展从 YouTube 响应中删除 X-Frame-Options 标头。请参阅<a href="https://stackoverflow.com/q/41718033">这个问题</a>。</p> </li> </ul> </answer> <answer tick="false" vote="7"> <p>这似乎与引入<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy" rel="noreferrer">对 iframe 的更改</a>有关，至少在我遇到此问题时是这样。</p> <p>要解决此问题，我建议使用如下脚本：</p> <pre><code><script> let frame = document.createElement("iframe"); frame.referrerPolicy = "origin"; frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname; frame.frameBorder = "0"; frame.id = "chat-embed"; let wrapper = document.getElementById("chat-embed-wrapper"); wrapper.appendChild(frame); </script> </code></pre> <p>其中 <pre><code>chat-embed-wrapper</code></pre> 是 id 为 <pre><code>chat-embed</code></pre> 的 iframe 的父级，<pre><code>VIDEO_ID</code></pre>（在 <pre><code>frame.src</code></pre> 分配中）是目标视频的 id。您必须根据您的设置对此进行一些修改，但这是一般情况的解决方案。</p> </answer> <answer tick="false" vote="2"> <p>不知道你最后是否成功了？我们已经设法使用此 iframe 在我们的网站上运行它，希望它对您有所帮助：</p> <pre><code><iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&embed_domain=www.YourDomainHere.com"width="100%" height="600"></iframe> </code></pre> <p>我希望这会有所帮助:) PS 它不适用于移动设备（YouTube 表示他们已从移动设备上删除了此功能），但它确实适用于桌面和选项卡。</p> <p>最美好的祝愿。</p> </answer> <answer tick="false" vote="2"> <p>Angular 的简单解决方案：</p> <p>HTML 部分：</p> <pre><code> <iframe frameborder="0" height="470" [src]="url" width="780"></iframe> </code></pre> <p>TS部分：</p> <pre><code>constructor(private sanitizer: DomSanitizer) {} ngOnInit() { this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&embed_domain=' + window.location.hostname); } </code></pre> </answer> <answer tick="false" vote="0"> <p>我可以确认这确实有效。但是，当 <pre><code>embed_domain</code></pre> 的值为“example.com”时，即使页面的 url 以“<a href="https://www.example.com" rel="nofollow noreferrer">https://www.example.com</a>”开头，我也会收到相同的 X Frame 错误。即确保该值匹配 <pre><code>window.location.hostname</code></pre>。如果您没有规范的主机重定向，Addison Crump 的解决方法可能会解决此问题。 </p> </answer> <answer tick="false" vote="0"> <pre><code> <iframe src="https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=127.0.0.1" width="350" height="500" ></iframe> </code></pre> <p>它对我有用！</p> </answer> <answer tick="false" vote="0"> <p>这是我当前在 WordPress 网站上工作的 iframe：</p> <pre><code><iframe src="https://www.youtube.com/live_chat?v=YOUTUBE_VIDEO_ID&amp;embed_domain=www.yourdomain.com" width="100%" height="550" data-gtm-yt-inspected-4="true" data-gtm-yt-inspected-14="true" data-gtm-yt-inspected-13="true" data-gtm-yt-inspected-7="true" data-gtm-yt-inspected-6="true" data-gtm-yt-inspected-17="true" data-gtm-yt-inspected-22="true" data-gtm-yt-inspected-15="true" data-gtm-yt-inspected-20="true"></iframe> </code></pre> <p>您需要更改的网址是这样的：</p> <p>“https://www.youtube.com/live_chat?v=YOUTUBE_VIDEO_ID&embed_domain=www.yourdomain.com”</p> <p>更改 YOUTUBE_VIDEO_ID 以匹配与聊天相关的视频</p> <p>更改 <a href="http://www.yourdomain.com" rel="nofollow noreferrer">www.yourdomain.com</a> 以匹配您的域名</p> <p>希望有帮助</p> </answer> </body></html>
我在这个Java问题上遇到了同样的问题（没有解决，顺便说一句），但是在C#上： 使用 iFrame 打开新窗口后测试用例运行速度非常慢 我要切换到的 iframe： 我在这个 Java 问题上遇到了同样的问题（未解决，顺便说一句），但在 C# 上： 使用 iFrame 打开新窗口后测试用例运行速度非常慢 我要切换到的 iframe： <iframe id="iframeXYZ" width="100%" height="2280px" frameborder="0" src="/Pages/Abc.html"> </iframe> 选择此 iframe 的代码： var frameXYZ = driver.FindElement(By.Id("IdOfMyFrame")); driver.SwitchTo().Frame(frameXYZ); //I do my stuff here, then return to the main frame driver.SwitchTo().DefaultContent(); 该类没有任何Thread.Sleep，甚至没有显式/隐式等待。 我遇到了这个信息，但即使使用 iframe 的 ID，它也没有帮助： webdriver.switchTo().frame() 方法可以采用名称或 ID。它会 必须在 DOM（文档对象模型）中搜索名称或 id。你可以 页面上有多个具有相同名称属性的内容。所以使用id 属性往往会更快。但是，如果计算机运行浏览器 速度很慢并且/或者 DOM 中有很多属性，可能需要花费一些时间 同时切换帧。 还有一个 webdriver.switchTo().frame() 方法需要一个索引。 所以如果你知道它是第 1 帧你可以使用 webdriver.switchTo().frame(1)。但如果帧的顺序可能会改变 这没有帮助。您还可以使用 WebElement 来切换框架。所以 有时 webdriver.findElement() 方法会更快地找到框架 切换到这个 WebElement 会更快。 这确实需要更多地优化代码以使其更快。 字体：https://grokbase.com/t/gg/webdriver/15bh2n599f/switching- Between-frames-is-very-slow 我想知道这个问题是否与Chrome浏览器本身有关，以及是否没有最终的解决方案。 我使用Python并且可以阅读switch_to.frame()代码 运行的主代码行是 self._driver.execute(Command.SWITCH_TO_FRAME, {"id": frame_reference}) 所以减慢时间是尝试 find_element() 的时间 最快的代码是传入框架的WebElement driver.switch_to.frame( driver.find_element('//*[@name="yourframename"]') ) 完整代码位于.../.venv/lib/python3.11/site-packages/selenium/webdriver/remote/switch_to.py def frame(self, frame_reference: Union[str, int, WebElement]) -> None: if isinstance(frame_reference, str): try: frame_reference = self._driver.find_element(By.ID, frame_reference) except NoSuchElementException: try: frame_reference = self._driver.find_element(By.NAME, frame_reference) except NoSuchElementException as exc: raise NoSuchFrameException(frame_reference) from exc self._driver.execute(Command.SWITCH_TO_FRAME, {"id": frame_reference})
防止 iframe 内的任何内容设置 cookie 的推荐方法
我从我不信任的来源获取要放入 iframe 中的内容。为了满足特定的需求，我希望内容（可能包括 javascript）根本无法设置 cookie。 W...
从 iframe 中提取值，将 var 内容转换为文本？ [重复]
我正在尝试获取 iframe 内的美元值（75.12 美元）。我可以存储 iframe 这样做： var frm = document.getElementsByTagName("iframe")[0] 但我无法继续做
错误： 不安全地尝试从 URL 为“https://n-x4qqieogl32dh7vitgxnysfogdq2h5ccinv5p6a-0lu-script.googleusercontent.com/
尝试了两种方法在我的 Cargo 3 站点中添加 p5.js 元素，但无论采用哪种设置方式，我似乎都会遇到一系列不同的问题。 方式1是直接将其放置在html编辑器中 – 方式 2 是
我想使用 iFrame 将 PagerDuty 集成到 BackStage 中。 Pagerduty 中是否有可用的嵌入式链接？我怎样才能访问它？ 我尝试使用 API 插件，但我想使用 iFrames。就像
iFrame 中嵌入的 Google Sheet 会导致父级在加载后滚动到 0, 0 位置
在 iframe 中嵌入 Google 表格时，我遇到了一个奇怪的问题。我有一个很长的 HTML 页面，其中包含一个 div 列表以及一个用于 Google Sheet 的嵌入式 iframe。当我滚动到 iframe 时
我刚刚在 WP 中制作了一个页面，其中有 3 个 iframe。一个是谷歌日历，另外两个是谷歌文档（电子表格）。 谷歌日历工作正常，但每次我点击一些东西......
当我嵌入这个gdrive iframe时，我的页面会跳转到顶部，一旦你点击该iframe： <p>当我嵌入此 gdrive iframe 时，我的页面会跳转到顶部，一旦您单击该 iframe：</p> <pre><code><iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded"></iframe> </code></pre> <p>JSFiddle：<a href="https://jsfiddle.net/0qpe53os/">https://jsfiddle.net/0qpe53os/</a></p> <p>问题：为什么会这样做以及如何防止它这样做？</p> <p>我尝试过<pre><code>preventDefault</code></pre>但没有任何运气。预先非常感谢您的帮助。</p> </question> <answer tick="false" vote="1"> <p>我不确定这是否有用。顺便说一句，您可以使用 onload 属性向下滚动页面： <strong>onload =“滚动（0，屏幕.高度）;”</strong></p> <pre><code><iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded" onload="scroll(0,screen.height);"></iframe> </code></pre> </answer> <answer tick="false" vote="1"> <p>根据我的调查，不是iframe本身造成的。这是由嵌入的谷歌文档执行的 javascript 造成的。当谷歌文档的编辑区域获得焦点时，就会发生这种情况。如果您访问菜单区域，则不会发生任何事情，除非它导致某些内容被添加到编辑区域。我尝试使用沙箱属性限制 iframe，这种行为不再发生，但当然你不能使用谷歌文档。</p> <p>抱歉，没有建议的解决方案。</p> </answer> <answer tick="false" vote="0"> <p>根据我的研究，Google 表格/文档/等具有一种内在行为，每当用户单击该单元格时，就会滚动到他们认为该单元格必须在的任何位置。问题是：</p> <ol> <li>它无法被禁用，并且</li> <li>它总是认为嵌入的工作表/文档位于页面顶部。</li> </ol> <p>因此，当单击单元格/文档时，它会自动滚动到页面顶部。</p> <p>这是一个在我的 React 应用程序中对我有用的解决方案。我所做的是添加侦听器来侦听所有滚动，然后区分是否是用户的鼠标滚动与 iframe 触发的自动滚动。我根据卷轴的大小来区分它。如果它> 250，那么我认为它一定是自动滚动，因为它相当大，因此我们通过返回到之前的位置来防止滚动（也可以与> 150等其他值一起使用）。因此，我们只允许更小的、更可能是人类的卷轴。</p> <p>请注意：这对我有用，因为我的 iframe 位于网站底部。它可能不适用于没有太多滚动空间的较小网站。</p> <pre><code>import React, { useState, useEffect, useRef } from 'react'; const GoogleDocsViewer = ({ documentId }) => { const lastScrollY = useRef(window.scrollY); useEffect(() => { const handleWheel = () => { lastScrollY.current = window.scrollY; }; const handleScroll = () => { const scrollDiff = Math.abs(window.scrollY - lastScrollY.current); if (scrollDiff > 250) { window.scrollTo(0, lastScrollY.current); } else { lastScrollY.current = window.scrollY; } }; document.addEventListener('wheel', handleWheel, { passive: true }); window.addEventListener('scroll', handleScroll, { passive: true }); return () => { document.removeEventListener('wheel', handleWheel); window.removeEventListener('scroll', handleScroll); }; }, []); return ( <iframe src={`https://docs.google.com/document/d/${documentId}/edit?usp=sharing&embedded=true`} style={{ width: '100%', height: '100%', border: 'none', position: 'absolute', top: 0, left: 0 }} title="Google Doc" /> ); }; export default GoogleDocsViewer; </code></pre> </answer> <answer tick="false" vote="-2"> <p>您可以使用 javascript 检查 iframe 是否是活动元素，如果它是活动的则跳回到它。</p> <p><pre><code>if(document.activeElement.tagName == 'IFRAME') { document.activeElement.scrollIntoView() } </code></pre></p> <p>请参阅此 <a href="https://jsfiddle.net/8p6n8und/" rel="nofollow">Jsfiddle</a> 以获取工作示例。</p> </answer> </body></html>
iframe 中嵌入视频的全屏模式，该视频嵌入到另一个 iframe 中
是否可以为嵌入在另一个 iframe 中的视频启用全屏模式？ 举个例子： ... ... <p>是否可以为嵌入 iframe（同时也是另一个 iframe 的一部分）中的视频启用全屏模式？</p> <p>举个例子：</p> <pre><code>... <body> ... <iframe id="video1" src="..." allowfullscreen></iframe> <!-- Full screen mode works --> <iframe id="comments" src="..." allowfullscreen> #document ... <iframe id="video2" src="..." allowfullscreen></iframe> <!-- Full screen mode does not work --> </iframe> ... </body> ... </code></pre> </question> <answer tick="false" vote="0"> <p>就像在提供的代码示例中一样，我们可以看到父 iFrame 和子 iFrame 都具有“allowfullscreen”属性。</p> <pre><code> <iframe id="comments" src="..." allowfullscreen> <iframe id="video2" src="..." allowfullscreen></iframe> <!-- Full screen mode does not work --> </iframe> </code></pre> <p>根据 <pre><code>Permission Policy Header</code></pre>，我们应该使用 <pre><code>allow="fullscreen"</code></pre> 而不是使用 <pre><code>allowfullscreen</code></pre>。请参阅下面更新的代码。</p> <pre><code><iframe id="comments" src="..." allow="fullscreen"> <iframe id="video2" src="..." allowfullscreen></iframe> <!-- Full screen mode does not work --> </iframe> </code></pre> <p>这个解决方案对我有用，否则可能会有一些来自您嵌入的 iFrame 的 <pre><code>Cross-Origin Restrictions</code></pre>。</p> </answer> </body></html>
我在页面上嵌入了 YouTube 视频，除了用户能够全屏观看视频之外，客户还希望视频自动播放。 似乎是或者 - 当
postMessage 到 iFrame 无法通过 GTM 工作
我面临着一个奇怪的情况。我编写了一段代码，该代码应该通过 postMessage() 将变量发送到嵌入在我的页面上的 iFrame。 父页面是：“https://www.bestcars.com（示例） ...
当我编码时，我喜欢放置 iframe，但问题是当我查看完成的项目并尝试输入链接时，它不起作用 这是代码： 当我编码时，我喜欢放置 iframe，但问题是当我查看完成的项目并尝试输入链接时，它不起作用 这是代码： <!DOCTYPE html> <html> <head> <title>Eaglercraft Site - Astra Client</title> <link rel="icon" type="image/x-icon" href="astra client.jpeg"> </head> <body><iframe src="https://raw.githack.com/BarneyCompiler/AstraClientEagler/main/javascript/EaglercraftX_1.8_Offline_International.html" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0%;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe> <p>Your browser does not support iframes.</p> </body> </html> 所以当我尝试在游戏中输入我的用户名时，当我看到它看起来不起作用时 我尝试了在互联网上找到的不同方法，例如嵌入代码，但这也不起作用。我暂时没有尝试其他任何事情。我确实知道，如果没有 iframe 或仅将链接嵌入到新选项卡中，我就可以输入。 尝试编辑 iframe： <iframe src='link' frameborder=0 style='overflow:hidden!important;overflow-x:hidden!important;overflow-y:hidden!important;height:100%;width:100%;position:absolute!important;top:0%;left:0px;right:0px;bottom:0px;z-index:9999!important;' height='99%' width='100%'></iframe> 然后在 iframe 后面制作一个不可见的按钮： <button onclick='this.iframe[0].contentWindow.document.body.focus();' hidden> </button>
MUI DesktopDatePicker 导致滚动到 iFrame 中的顶部
我正在尝试在 iFrame 中使用 MUI 中的 DesktopDatePicker。 打开（单击按钮）时，页面父页面滚动到顶部。 使用效果（（）=> { if (datePicker.current) { 常量
Rails 6. 允许任何其他域将特定页面嵌入到 iFrame 中
我希望允许任何人通过 iFrame 嵌入我的 Rails 网站。但我只想打开一些特定的路由，例如 /emded/entity1/:entity1_id 和 /emded/entity2/:entity2_id。 例如，Youtube doe...