iframe 相关问题

这是 iframe <p><a href="https://i.stack.imgur.com/lEZUk.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2xFWlVrLnBuZw==" alt="Here is the iframe"/></a></p> <p><pre><code><iframe src="User/UserAccounts" id="7969e06b-e259-82e7-ee38-fdac0a745e4a_iframe" frameborder="0" marginwidth="10" style="width: 823px; height: 744px;" onload="setTimeout(SSWindow.DocumentReady('#7969e06b-e259-82e7-ee38-fdac0a745e4a_iframe'), 20);"></iframe></code></pre></p> <p>id="7969e06b-e259-82e7-ee38-fdac0a745e4a_iframe</p> <p>7969e06b-e259-82e7-ee38-fdac0a745e4a = 这部分每次重新加载都会改变</p> <p>我尝试了以下方法，但不起作用。 //跨度[@class='bodyIframe'] //跨度[包含(text(),'_Iframe')]</p> </question> <answer tick="true" vote="1"> <p>也可以使用任何其他属性，只要其值是唯一的并且在重新加载时保持不变。</p> <p>例如<pre><code>src</code></pre> 值为“User/UserAccounts”的属性在这里可能很有用。</p> <p>如果您使用库<pre>SeleniumLibrary</pre>，则分别使用关键字<a href="https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html#Select%20Frame" rel="nofollow noreferrer"><code>select frame</code></a>选择框架。例如：</p> <pre><code>Select frame //iframe[@src="User/UserAccounts"] </code></pre> </answer> </body></html>

iframe selenium-chromedriver robotframework

回答 0 投票 0

Google Chrome、Edge 抛出警告 <link rel=preload> 对文档使用不受支持的 `as` 值

我正在使用预加载 iframe。例如但 Chrome 和 Edge 给了我警告...

html google-chrome iframe microsoft-edge

回答 1 投票 0

如何在 Angular 14 中自动设置 iframe 的高度？

我希望 Iframe 标签的高度设置为其内容的 100%。在 HTML 文件中，我有： <p>我希望 Iframe 标签的高度设置为其内容的 100%。</p> <p>在 HTML 文件中，我有：</p> <pre><code><div *ngIf="linkSearch && linkSearch.link" class="row"> <iframe *ngIf="!linkSearch.error" scrolling="no" class="iframe_{{linkSearch.title}}" id="iframe_{{linkSearch.title}}" [src]="getSafeUrl(linkSearch.link)" frameborder="0"></iframe> </div> </code></pre> <p>在 component.ts 文件中，我有：</p> <pre><code>ngOnInit() { setTimeout(() => { this.setHeightForIframe(); }, 600); } public getSafeUrl(url: string): SafeResourceUrl { return this._sanitizer.bypassSecurityTrustResourceUrl(url); } public setHeightForIframe(): void { const iframe = document.getElementById(`iframe_${this.linkSearch.title as string}`) as HTMLIFrameElement; if (iframe) { iframe.style.height = `${iframe.contentWindow?.document.body.scrollHeight}px`; console.log(this.linkSearch.title) console.log(iframe.contentWindow?.document.body.scrollHeight); } } </code></pre> <p>我尝试过一些方法，但对我来说不起作用：</p> <ul> <li> </li> <li>使用<pre><code>iframe.addEventListener("load", () => { this.setHeightForIframe() }, false)</code></pre></li> <li>iframe 的 CSS（显示、高度、位置...）</li> </ul> <p>有人知道这个案例的解决方案吗？以下是我在 iframe 中使用的一些链接：<a href="https://mazii.net/vi-VN" rel="nofollow noreferrer">https://mazii.net/vi-VN</a>、jisho.org、ejje.weblio.jp、tratu.soha.vn。</p> <p>注意：我一次将所有链接作为选项卡组件打开，它确实加载了所有链接。</p> </question> <answer tick="false" vote="0"> <p>我也有同样的问题。如果您知道 iFrame 中的内容，您可以使用以下方式：</p> <h4>HTML</h4> <pre><code> <div *ngIf="urlSafe" class="html-data" [style.height]="height + 'px'"> <iframe (load)="onHtmlDataLoad($event)" [src]="urlSafe" frameborder="0" ></iframe> </div> </code></pre> <h4>TS 组件</h4> <pre><code>height: number = 0; ..... /** Hide the scrollbar of the iFrames content and set to full height to it */ onHtmlDataLoad(event: any) { const iFrameElement = <HTMLIFrameElement>event.srcElement; const articleElement = iFrameElement.contentDocument?.getElementsByTagName('article'); const headerElement = iFrameElement.contentDocument?.getElementsByTagName('header'); const footerElement = iFrameElement.contentDocument?.getElementsByTagName('footer'); if (articleElement && headerElement && footerElement) { this.height = 0; for (let el of Array.from(articleElement)) { this.height += el.offsetHeight; } for (let el of Array.from(footerElement)) this.height += el.offsetHeight; for (let el of Array.from(headerElement)) this.height += el.offsetHeight; this.height += 42 + 20; //Buffer for padding (footer = 42, body = 20) if (iFrameElement.contentDocument?.body) { iFrameElement.contentDocument.body.style.overflowY = 'hidden'; } } } </code></pre> <p>我将 <pre><code>height</code></pre> 变量设置为 div。该高度将在组件打字稿文件中计算。就我而言， <pre><code>article</code></pre> 的内容中有 <pre><code>header</code></pre>、<pre><code>footer</code></pre> 和 <pre><code>iFrame</code></pre> 标签元素。我搜索这些元素，获取它们的当前高度，并计算我设置为 <pre><code>iFrame</code></pre> （或其外部 <pre><code>div</code></pre>）的完整高度。</p> <p>您可以在公共<pre><code>css</code></pre>中添加一些<pre><code>styles.scss</code></pre>来修复<pre><code>iFrame</code></pre>将使用其父级的完整高度<pre><code>div</code></pre></p> <pre><code>iframe { height: 100%; width: 100%; // position: absolute; // if needed } </code></pre> </answer> </body></html>

css angular iframe angular14

回答 0 投票 0

Chrome声称未设置内容安全策略指令frame-src，但它是XXXX

正如您在屏幕截图中看到的，我想通过 iFrame 加载页面。 XXXX 正如您在屏幕截图中看到的，我想通过 iFrame 加载页面。 <!doctype html> <html> <head> <title>XXXX</title> <meta http-equiv="Content-Security-Policy" content="frame-src apexXXXX.XXXXXXXX.net"> <link rel="stylesheet" href="style.css"> </head> <body> <iframe src="https://apexXXXX.XXXXXXXX.net/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></iframe> </body> </html> 对我来说，无法理解为什么 Chrome 拒绝这样做。即使我使用： <meta http-equiv="Content-Security-Policy" content="default-src *"> 出现相同的错误消息。当然，我也尝试了几个 http 前缀或尾部斜杠。我做错了什么？ BR&谢谢！约翰（我花了几个小时阅读类似的帖子，所以不应该有重复）发布@granty的评论作为答案，因为它很重要。 HTTP 标头或元标记都可以使用，不能同时使用不同的规则。意思是，如果HTTP服务器添加了标头，元标记将不会覆盖它

google-chrome iframe content-security-policy

回答 1 投票 0

通过.NET应用程序生成Power BI嵌入令牌，以丰富客户的Power BI嵌入式可视化的iFrame链接

应通过 iFrame 嵌入在现有 Web 应用程序中向具有 RLS 的客户显示报告。客户通过 B2C AAD 登录 Web 应用程序时验证自己的身份，并且......

iframe access-token bearer-token powerbi-embedded

回答 1 投票 0

倒带 youtube 嵌入视频 [html、css、js]

我是整个 html css js 包的新手，我正在尝试创建一个网站，该网站将显示一个 YouTube 视频，并锁定控件（我是通过阻止用户与 vi 交互来完成此操作的。 .

javascript html iframe youtube

回答 1 投票 0

如何处理 .NET MAUI Blazor 应用程序中的 iFrame 内容？

我有一个 .NET MAUI Blazor 应用程序。我为支付系统添加了 iFrame。支付完成后，支付系统会重定向到https网页。我需要处理页面内容或计算...

iframe blazor maui

回答 1 投票 0

当系统在测试过程中抛出意外警报时，Cypress 测试将永远挂起

当Web应用程序意外地通过警报框抛出错误时赛普拉斯测试永远挂起/卡住，并且测试永远不会完成或失败，直到用户手动关闭浏览器或手动单击...

javascript iframe cypress cypress-testing-library cypress-custom-commands

回答 1 投票 0

隐藏iframe jquery中的特定div

我正在使用phonegap创建webview应用程序我正在使用 iframe 方法在应用程序内显示我的网站我需要向移动浏览器用户显示弹出消息来下载应用程序所以我创造了

javascript jquery cordova iframe phonegap

回答 2 投票 0

iFrame 自动调整尺寸

在“死马当活马医”评论开始之前，让我先澄清一下我正在尝试做什么，看看是否有人可以帮助我。我有一个带有 iFrame 的父窗口。 iFra 中的内容...

javascript asp.net iframe dom-events

回答 1 投票 0

如何在 iframe 中断词

我一直在编写文本编辑器教程进行练习，并且遇到了 iframe 的问题。如果要发送垃圾邮件而不包含任何空格，iframe 将创建一个滚动条

javascript html css iframe

回答 2 投票 0

由于“跨域开启策略”，无法在新窗口中从 iframe 打开 google 链接

我有一个包含链接的 iframe，如下所示：我有一个包含链接的 iframe，如下所示： <a href="https://www.google.com/travel/flights/s/3nDqYBmu3h4Jfmwm6" target="_blank" rel="noopener noreferrer">Purchase Flight</a> 单击链接时，我希望它打开一个新选项卡或窗口。但是，Chrome 阻止页面加载并出现以下错误（在“响应”下的“网络”选项卡中）： cross-origin-opener-policy: same-origin-allow-popups -> This document was blocked from loading in an iframe with a sandbox attribute because this document specified a cross-origin opener policy. 我没有在请求上设置任何特定标头，只是一个 href 链接。该链接可以在 Safari 中正确打开，但不能在 Chrome 中打开。非常感谢任何帮助！！有 2 条信息有助于理解发生此错误的原因： iframe HTML 元素有一个名为 sandbox的属性，它对 iframe 应用了许多限制 “设置该属性后，内容被视为来自唯一来源，表单和脚本将被禁用，链接将被阻止定位其他浏览上下文，并且插件将被禁用”(1) “沙盒导航浏览上下文标志：此标志可防止内容导航除沙盒浏览上下文本身（或进一步嵌套在其中的浏览上下文）之外的浏览上下文……”(2) Cross-Origin-Opener-Policy：HTTP 标头允许您确保顶级文档不会与跨源文档共享浏览上下文组。其可能的值为： unsafe-none：这是默认值。允许将文档添加到其打开器的浏览上下文组中，除非打开器本身具有同源或同源允许弹出窗口的 COOP same-origin-allow-popups：保留对新打开的窗口或选项卡的引用，这些窗口或选项卡要么不设置 COOP，要么通过设置不安全的 COOP 来选择退出隔离 same-origin：将浏览上下文仅隔离到同源文档。跨源文档不会在同一浏览上下文中加载。” 根本原因当从 iframe 打开链接时，会发生 2 件事： sandbox属性被继承并应用于链接→链接现在被视为来自唯一的来源。与Google的COOP标题相结合→链接在新的浏览上下文中打开 → 链接被阻止，因为链接被阻止定位其他浏览上下文在沙盒 iframe 中解决方案将 allow-popups-to-escape-sandbox 添加到 iframe 的 sandbox 属性。这样，打开的链接就不会被沙箱化 allow-popups-to-escape-sandbox：允许沙盒文档打开新窗口，而无需在其上强制使用沙盒标志。例如，这将允许安全地对第三方广告进行沙箱处理，而无需对广告链接到的页面施加相同的限制参考资料： (1) https://www.w3.org/TR/2011/WD-html5-author-20110809/the-iframe-element.html#attr-iframe-sandbox (2) https://html.spec.whatwg.org/multipage/browsers.html#sandboxed-navigation-browsing-context-flag

html google-chrome iframe href

回答 1 投票 0

在 React 中使用 refs 处理 iframe

我正在尝试在 React 组件中设置 iframe 的内容。我有一个组件，其中包含一个 handleStatementPrint 函数，当 iframe 完成加载时必须调用该函数。那个

javascript html reactjs iframe ref

回答 1 投票 0

angularjs $http 文档加载到 iFrame 中

我已经阅读了两打参考文献，试图让 $http.get 从我的服务器中提取文档并将其加载到 iFrame 中。对文档的调用有效，并且所有内容都存储在数据中 - 我可以......

javascript angularjs iframe http-get

回答 1 投票 0

iframe 相关问题

最新问题