当 iframe 在 Angular 中加载时立即发送 postmessage() 到 iframe
我有一个系统，其中集成iframe的外部项目是有角度的，并且iframe代码也是有角度的。 iframe 有某些查询参数，例如登录 ID、密码...
CloudRun 上托管的 iframe 未在 React JS 中触发 onLoad 事件
我在网页中嵌入了一个 iframe。有时 iframe 需要一段时间才能加载，有时会立即加载。我想在加载 iframe 时显示旋转的轮子动画。我是
我正在 Next.js 中开发一个 React 组件，它使用 iframe 进行广告渲染。当前的实现直接设置 iframe 的 src 属性，并通过
Stripe Checkout 无法在 iFrame 中运行。请重定向至顶层结账
我正在尝试在 iframe 中加载 checkout.stripe，但它不起作用，我收到以下消息： Stripe Checkout 无法在 iFrame 中运行。请重定向到顶层的结帐。 我读过...
目标： iFrame 在组件 A 中加载网页内容 门户 iFrame 到组件 B iFrame 不应作为新实例安装，并且其所有状态（包括反应状态）应保留从 comp A 到 ...
我想使用 iframe API 延迟加载 youtube 视频。 IE。在开始时仅加载海报图像，当用户单击它时，仅加载实际图像及其内容。
有一个页面实现了支付请求API，它有一个Applepay按钮，一切正常。但一旦页面嵌入到 iframe 中，就会出现 SecurityError 错误：尝试加星...
Puppeteer：除了禁用网络安全之外获取 iframe 内容的另一种方法？
当我使用 Puppeteer 获取带有 iframe 的页面的 HTML 时，我遇到了 DOMException：阻止具有 origin [url] 的框架访问跨源框架 我知道要绕过这个，我可以...
Javascript 函数 openFullscreen() ，如何让它在页面上的多个 iframe 上工作
在页面上我有一个 iframe，src 中有 *.pdf 文件。 <p>在页面上我有一个 iframe，src 中有 *.pdf 文件。</p> <pre><code><div class="node--view-mode-full"> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> <p><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></p> </div> </code></pre> <p>浏览器中内置的 pdf 查看器现在不支持 iframe 中的全屏模式。</p> <p>我找到了解决方案<a href="https://www.w3schools.com/howto/howto_js_fullscreen.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_fullscreen.asp</a>，解决了问题 - 以全屏模式打开 iframe。在 w3schools 的示例中，打开 iframe 的按钮已存在于 HTML <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen</a>.</p> <p>在我的解决方案中，我通过 javascript 添加按钮，因为带有 iframe 的页面已经存在，但没有此类按钮：</p> <pre><code>jQuery(document).ready(function($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen()">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); </code></pre> <p>然后添加一个全屏打开 iframe 的功能（与 w3schools 相同）：</p> <pre><code>function openFullscreen() { var elem = document.getElementsByClassName("fullscreenframe")[0]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } }; </code></pre> <p>当页面上只有一个带有 *.pdf 的 iframe 时，Everysing 工作正常。但是，当我在页面上有两个或多个 iframe，并且单击任何 iframe 附近的“以全屏模式打开”任何按钮时，我总是在全屏模式下只看到第一个 *.pdf...</p> <p>我知道，这是因为我只得到 elem = document.getElementsByClassName("fullscreenframe")[0]; 中的第一个 iframe;</p> <p>我知道我需要使用类似的每个或类似的东西，但我无法解决它。在搜索关于页面上一个全屏元素的所有解决方案时，没有关于页面上多个元素的解决方案...谢谢。</p> </question> <answer tick="true" vote="0"> <p>也许是这样的：</p> <pre><code>jQuery(document).ready(function($){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button onclick="openFullscreen(' + index + ')">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); }); function openFullscreen(index) { var elem = document.getElementsByClassName("fullscreenframe")[index]; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } </code></pre> </answer> <answer tick="false" vote="0"> <p>为什么不整合 jQuery？</p> <pre><code>const fullScreen = element => element.requestFullScreen(); // all modern browsers $(function(){ $(".node--view-mode-full iframe[src*='.pdf']").each(function (index) { $(this).addClass('fullscreenframe'); $(this).attr('id', 'fullscreen-'+index); $('<button class="fullScreen">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this); }); $(".fullScreen").on("click", function() { const $iFrame = $(this).closest('p').find('iframe.fullscreenframe'); if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element }); }); </code></pre> </answer> </body></html>
只有第一个调用的 href 才会在 Lightbox 中打开 iframe 其他 href 打开新页面
我正在使用jquery简单灯箱。我需要在灯箱中总共打开 10 个链接，所有链接都显示不同的 iframe。一次只能显示一个灯箱。 这对于第一个小时来说效果很好......
Fancybox v5，如何使用多个 IFRAME 链接在关闭时重新加载到不同的 url？在 fancybox 上使用 $_GET
目标：链接到 IFRAME 页面以获取 GET 值的多个按钮，并且可以在关闭后重新加载到不同页面。 目标：链接到 IFRAME 页面以获取 GET 值的多个按钮，并且可以在关闭后重新加载到不同页面。 <a id='DeleteButton-1' href='delete_email.php?EmailID=1' data-fancybox data-type='iframe'>1</a> <a id='DeleteButton-2' href='delete_email.php?EmailID=2' data-fancybox data-type='iframe'>2</a> <a id='DeleteButton-3' href='delete_email.php?EmailID=3' data-fancybox data-type='iframe'>3</a> 在 delete_email.php 上，我分配 $_GET 值，然后从 EmailID 中删除 MySQL 记录。 在 Fancybox v3 上，我可以分配不同的 fancybox 绑定以在关闭后转到不同的页面。 <a href='delete_email.php?EmailID=1' data-fancybox='DeleteEmail' data-type='iframe'>1</a> <a href='delete_email.php?EmailID=2' data-fancybox='DeleteEmail' data-type='iframe'>2</a> <a href='delete_email.php?EmailID=3' data-fancybox='DeleteEmail' data-type='iframe'>3</a> <a href='show_email.php?EmailID=1' data-fancybox='ShowEmail' data-type='iframe'>1</a> <a href='show_email.php?EmailID=2' data-fancybox='ShowEmail' data-type='iframe'>2</a> Fancybox.bind('[data-fancybox="DeleteEmail"]', { on: { close: () => { location.href = 'email_trash.php'; } } }); Fancybox.bind('[data-fancybox="ShowEmail"]', { on: { close: () => { location.href = 'email_inbox.php'; } } }); 问题是，Fancybox v5正在使用fancybox绑定DeleteEmail获取所有url并删除它们，而不是传递的单个EmailID。我认为它将它们视为像“画廊”一样的“组”，并将所有ID带到更新数据库。 我已经使用版本 3.5.7 与 5.0.36 验证了这一点。 我可以对所有内容进行默认绑定以重新加载到不同的页面，但如果我有“查看”按钮和“删除”按钮，则这不起作用。 Fancybox.bind('[data-fancybox]', { on: { "destroy": (fancybox, eventName) => { location.href = 'email_index.php'; }, }, }); 我可以绑定一个特定的ID来将该按钮发送到特定的页面.... Fancybox.bind(document.getElementById("DeleteButton-1"), "[data-fancybox]", //redirect Fancybox.bind(document.getElementById("DeleteButton-2"), "[data-fancybox]", //redirect Fancybox.bind(document.getElementById("DeleteButton-3"), "[data-fancybox]", //redirect 但是，如果您有数百个按钮，这不是一个好主意。 所以我的问题是.... 是否有类似“类”的东西，我可以分配一组按钮，以便它知道要重新加载/重定向到哪个页面？ 所以关闭后查看按钮将转到 xxx.php，删除按钮将转到 yyy.php 页面？ 是否有更好的方法将值（例如 EmailID）传递到 IFRAME 页面，而不是使用 URL 中的 $_GET？ 感谢您的帮助！ 我建议添加不同的数据属性来指示操作，并使用“关闭”事件来检查： Fancybox.bind('[data-fancybox]', { on: { "close": (fancybox) => { // This is the element that launched Fancybox when clicked. // Check `dataset`, `classname`, etc and decide what to do next console.log(fancybox.options.triggerEl); }, } });
我正在尝试从使用 Flourish 的网站中提取数据。我相信它使用 JavaScript 通过 Flourish 链接（iframe）加载数据。数据位于脚本标记中。 完整 Xpath" /html/body/mai...
如何将对话流与我的聊天界面集成？ 我想从对话流发送和接收文本数据，而不是使用 iframe 或对话流信使。
我正在尝试将仪表板嵌入到另一个站点的 iframe 中。这两个站点都仅使用 HTTP。这是超集文件中的配置 PUBLIC_ROLE_LIKE_GAMMA：正确 SESSION_COOKIE_SECURE = 发...
Iframe 外部 API 回调将 ASP.NET MVC 会话对象重置为 null
解释起来有点棘手，但我会尽力解释问题。首先，它仅在 Firefox、Chrome 和 Edge 上按预期运行。 我有一个网络退房表格...
谁能告诉我如何从<script>window.Flourish
基本上我正在尝试从使用繁荣的网站中提取数据，它使用javascript通过繁荣链接（Iframe）加载数据，我相信..数据位于脚本标记中。 完整的 Xpath”/html...
我的客户需要将自定义页面嵌入到 Microsoft Dynamics CRM 中。这并不是什么戏剧性的事情，它本质上是嵌入一个 iFrame。 然而......他很迂腐，希望它看起来像其他一切......
我在我的flutter应用程序中添加了Pod Player插件作为播放youtube直播视频的依赖项。我对youtube播放器和iframe插件不满意，因为我使用了Pod播放器。我很满意...
如何在 Angular 16 应用程序中监听 javascript 回调
我正在尝试使用 iFrame 将我的 Angular 16 应用程序与第三方网站集成。我的问题是如何捕获来自他们网站的回调响应？ 与其 API 集成的建议方法...
如何在不使用 iframe 的情况下使用 Angular 为 chromeextension 创建侧边栏
我正在使用 Angular 开发 chrome 扩展，我的扩展与 MaxAI chrome 扩展类似，当用户单击小部件时，它会打开侧边栏。 我尝试了一些教程来创建...
Youtube IFrame API - 启用 Youtube 历史记录时开始时间不起作用
当用户在启用了 Youtube 历史记录的情况下登录 YouTube 时，开始时间将不起作用。 不知何故，YouTube会在视频播放后转到历史上的最后一个保存时间。 重现步骤...
如果我在css中设置高度，当我设置高度时用鼠标拖动时，面板在调整大小时出现问题，因此它会冻结
我有 3 个面板（左、中、右），当我用鼠标拖动它们时，它们会调整大小。在右侧面板中，我有一个 iframe，其 css 为 width: 100%。为了更清楚，我把它涂成红色。 我愿意
CSS：如果我在CSS中设置高度，当我设置高度时用鼠标拖动时，面板在调整大小时会出现问题，因此它会冻结
我有 3 个面板（左、中、右），当我用鼠标拖动它们时，它们会调整大小。在右侧面板中，我有一个 iframe，其 css 为 width: 100%。为了让它更清晰，我把它涂成红色。 我愿意
我有一个引导网格布局，但行没有占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML： 我有一个引导网格布局，但该行未占据 100% 宽度。我正在使用 Bootstrap 4 alpha 6。这是 HTML： <div class="container-fluid"> <h1 class="center-text" id="heading">[Enter Heaading Here]</h1> <div class="container"> <div height="100px" class="row border-show"> <div class="col-4" id="one"></div> <div class="col-4" id="two"></div> <div class="col-4" id="three"></div> </div> </div> </div> 这是CSS： .center-text{ text-align: center; } #heading{ padding: 60px; } .border-show{ border-style: solid; border-color: black; } 万一其他人遇到这个问题并且答案不能解决他们的问题，导致此问题的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下，导航栏已经有一个类似网格的系统，因此如果您尝试在其中添加列，那么您似乎将其推到了边缘。无论如何，它们都没有必要。 因此，如果这个答案不能解决您的问题，请检查您是否位于另一个已经处理间距的 Bootstrap 组件内。您可能正在尝试对您的内容进行双重定界！ 将其从container中取出。 container 不是 100% 宽度，不应嵌套在另一个容器中。 container类有这样的效果。 <div class="container"> <div class="row"> <div class="col-12"> div into <b>container</b> class </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> div into <b>container-fluid</b> class </div> </div> </div> 此代码将生成以下图像： 在我的例子中，甚至容器流体也不起作用，因为我在同一 div 中使用了带有容器流体的行类。因此，我从父 div 中删除了行类，并在其中创建了一个子 div 并使用了行类。然后就成功了。 <div class="container-fluid row"> <div class="col-12"> didn't work </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> worked </div> </div> </div> 我刚刚遇到了类似的挑战，嵌入式 iframe 没有占据整行。我正在使用 bootstrap 5。以下是让 iframe 占据 100% 宽度并具有响应能力的方法： <div class="row"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe> </div> </div> ratio和ratio-16x9是Bootstrap 5中的新功能，使这一切变得超级简单。
我有这样的代码： 我有这样的代码： <audio id="player" autoplay controls> <source src="http://docs.google.com/uc?export=open&id=107VpNA7BU4AIxVsK2sRg69-rOigdU57n" type="audio/mp3"> </audio> 最初，上面的代码应该播放驱动器上文件中的歌曲。但是，由于某种原因，它不再起作用了。有人遇到过类似问题吗 听起来您面临着 HTML 的限制，不允许直接从 Google Drive 上的文件流式传输音乐。一种解决方法可能是将音乐文件托管在允许直接流式传输的服务器上，或者您可以考虑使用支持此功能的不同平台或技术。您需要帮助寻找替代解决方案或平台吗？ Google 云端硬盘不支持直接流式传输。 您可以尝试使用 Dropbox OP的方法实际上确实适用于从谷歌驱动器传输音频，使用; src="http://docs.google.com/uc?export=open&id=file-id"， 直到 2024 年 1 月 10 日左右。 在上述日期之前，我有几个 html/javascript 网络播放器直接从驱动器流式传输我的音乐。 Google 已开始推出影响第三方访问驱动器文件方式的更改；意思是在drive.google.com之外 来自 Google Drive 服务器之外的文件请求不再受到相同的处理。 下面链接中的答案部分解释了问题： https://stackoverflow.com/a/77805668/23238731 虽然这个答案是参考谷歌驱动器中的图像，但这同样适用于像OP代码一样链接的音频文件。 Google 建议用户现在使用 iframe 以 html 形式显示 google 云端硬盘内容，包括音频。 我已经对此进行了测试，iframe 选项确实适用于音频，尽管它对于流媒体没有用。