“iframe”是一个HTML元素,它在文档中创建“内嵌框架”,允许在同一页面中显示单独的文档。
更新 - 如何与我无法使用 python-selenium 获得的按钮进行交互?
新版本 我想浏览此链接中显示的条款和条件弹出消息,无论是单击“同意”按钮还是“X”按钮关闭窗口,请使用 python-
我需要在主页和嵌入式 iframe 之间传递大量数据。 为了避免[反]序列化开销,我希望通过 postMessage() 传递 ArrayBuffer 并实例化视图
我想在 Razor MVC 页面中显示谷歌地图,但它不显示并出现错误,如下所示: 拒绝显示'https://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=
在 CSS 文档中调整大小时,我的 iframe 不会居中,但在 HTML 文档中调整大小时,iframe 不会居中。我希望在 CSS 文档中调整它的大小以获得良好的实践
所以我有我的 iframe,但左对齐,但它不会居中。 <p>所以我有我的 iframe,但左对齐,但它不会居中。</p> <pre><code><div class="iframeContainer"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> </code></pre> <p>CSS页面是</p> <pre><code>.iframeContainer { display: inline-block; justify-content: center; /* Center the iframe horizontally */ align-items: center; width: 1067px; height: 600px; } </code></pre> <p>当我尝试调整 html 文档中 iframe 的大小时,它起作用了。例如:</p> <pre><code><div class="iframeContainer"> <iframe width="1067px" height="600px" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> </code></pre> <p>那么 CSS 页面就会像这样</p> <pre><code>.iframeContainer { display: flex; justify-content: center; align-items: center; } </code></pre> <p>我还尝试将边距设置为自动...但这也不起作用。</p> <p>现在我可能是错的,所以请耐心等待,我是编码世界的新手,但我相信 iframe 是一个块元素,所以我对它作为 Flex 的工作原理感到困惑。我知道保持元素一致是很好的做法,因此我们将不胜感激任何帮助。</p> </question> <answer tick="false" vote="0"> <p>首先,您的显示内联块无法与align-items:center一起使用;并证明内容合理。只需使用 display: inline-block 删除它们并添加 margin:auto 即可,您将获得水平对齐:在下面的代码片段中检查整个页面</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.iframeContainer { width: 1067px; height: 600px; margin: auto; }</code></pre> <pre><code><div class="iframeContainer"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
我想用 iframe 制作一个 url 经常更改的交互式地图。 url 会发生变化,因为它考虑了地图的参数(如坐标、激活的图层、缩放级别等)。作为
我想禁用从我的网站到其他网站的 iframe 嵌入页面 我做了这个js: if(document.referrer.indexOf("mydomain.com") != -1) { ...</desc> <question vote="9"> <p>我想禁用从我的网站到其他网站的 iframe 嵌入页面 我做了这个js:</p> <p><pre><code><script type="text/javascript"> if(document.referrer.indexOf("mydomain.com") != -1) { window.location = "http://www.youtube.com/watch_popup?v=oHg5SJYRHA0"; } </script></code></pre></p> <p>脚本可以工作,但我有 page01.php 和 page02.php</p> <p><strong>我想在page01.php源代码中为page02.php插入iframe</strong></p> <pre><code><iframe src="page02.php"></iframe> </code></pre> <p>当我这样做时,我被重定向到:</p> <pre><code>http://www.youtube.com/watch_popup?v=oHg5SJYRHA0 </code></pre> <p><strong>如何解决这个问题?</strong> 谢谢</p> </question> <answer tick="false" vote="15"> <p>我建议您使用 X-Frame-Options 标头。如果您使用 nginx,您可以在服务器或位置块中添加此行:</p> <pre><code>add_header X-Frame-Options "SAMEORIGIN"; </code></pre> <p>当您添加此标头时,如果有人尝试在框架中加载您的页面,现代浏览器将拒绝该请求。请注意,这在旧版浏览器中不起作用。</p> </answer> <answer tick="false" vote="3"> <p>接受的答案很好,但如果您想添加额外的保证,即任何网站都不能将您的网站放入 iFrame,包括同一来源的其他网站,建议使用“X-Frame-Options DENY”。请注意,这应该是对已批准方法的补充。参见:</p> <p><a href="https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#x-frame-options-header-types" rel="nofollow noreferrer">https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#x-frame-options-header-types</a></p> <p><a href="https://i.stack.imgur.com/c9J6a.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2M5SjZhLnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="2"> <p>如果你不想把保护留给浏览器,你仍然可以使用JS。</p> <pre><code>//Check if the page is loaded in an iframe if(window.self != window.top) { //Almost all browsers will deny Cross-Origin script access, so //we will use a try-catch block try { if(window.parent.location.hostname.indexOf("mydomain.com") == -1) { window.location.href = "http://www.youtube.com/watch_popup?v=oHg5SJYRHA0"; } else { //You are in an iframe but Same-Origin } } catch (ex) { //Congrats, you are in an iframe loaded in a stranger's site! window.location.href = "http://www.youtube.com/watch_popup?v=oHg5SJYRHA0"; } } </code></pre> </answer> <answer tick="false" vote="1"> <p>对于 PHP 网站,您可以在脚本的开头、任何输出之前编写此行:</p> <pre><code>header( 'X-Frame-Options: DENY' ); </code></pre> <p>有关标头功能的更多信息<a href="http://php.net/manual/en/function.header.php" rel="nofollow noreferrer">此处</a>。</p> </answer> <answer tick="false" vote="0"> <p>使用 PHP</p> <pre><code>header("X-Frame-Options: SAMEORIGIN"); </code></pre> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options</a></p> </answer> </body></html>
我有一个带有嵌入式 iframe 的页面。我通常希望在 touchmove 事件上正常滚动页面。但是,我需要用户能够通过 touc 在 iframe 中“绘制”某些内容...
如何使用 python-selenium 与没有引用标记的 iframe 进行交互?
我想点击此消息上的“同意”按钮(我认为该消息是一个 iframe),以获取一些数据。 我遇到的第一个问题是我真的不知道我在处理什么......
我正在为客户开发 Flutter 应用程序。他们想要宣传他们的业务的 Facebook 页面,该页面向公众开放,不需要登录。在他们的网站上,...
根据 MDN Web 文档,允许属性: 指定 的策略功能。 来源 允许属性使用功能策略。功能策略允许功能,但我不...</desc> <question vote="6"> <p>根据 MDN Web 文档,<pre><code>allow</code></pre> 属性:</p> <blockquote> <p>指定 <pre><code><iframe></code></pre> 的策略功能。</p> </blockquote> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" rel="nofollow noreferrer">来源</a></p> <p><pre><code>allow</code></pre>属性使用<em>功能策略</em>。 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy" rel="nofollow noreferrer">功能策略</a>允许功能,但我不明白这是什么以及它是如何工作的。</p> <pre><code><iframe width="560" height="560" src="https://example.com" allow="camera; microphone"></iframe> </code></pre> <p>请给我一些例子好吗?</p> </question> <answer tick="false" vote="1"> <p>是的,正是属性<em><strong>allow</strong></em>“指定了<pre><code><iframe></code></pre>的功能策略”,但我并没有真正找到有关它和值的详细信息。但是,例如,我使用以下代码:</p> <pre><code>allow="geolocation" </code></pre> <p>在</p> <pre><code><iframe id="form-iframe" src="https://google.com" allow="geolocation" width="800" height="600"></iframe> </code></pre> <p>因为我需要网页可以使用地理位置。</p> </answer> <answer tick="false" vote="1"> <p>可以在 MDN 中找到权限策略指令列表。</p> <p>例如对于加速度计: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/accelerometer" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy/accelerometer</a></p> <p>使用左侧的菜单导航至其他指令。</p> </answer> <answer tick="false" vote="-2"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe></code></pre> </div> </div> <p></p> <pre><code>Enables a set of extra restrictions on any content hosted by the iframe. The value of the sandbox attribute can be either the empty string (all the restrictions are applied), or a space-separated list of tokens that remove each respective restriction. </code></pre> <h3>可能的值及其描述</h3> <p><pre><code>allow-top-navigation</code></pre> 允许嵌套浏览上下文将内容导航(加载)到顶级浏览上下文。</p> <p><pre><code>allow-same-origin</code></pre> 允许内容被视为来自其正常来源。如果没有此令牌,内容将被迫进入唯一的来源,从而阻止它访问来自同一来源的其他内容。此外,如果没有允许同源令牌,脚本将无法读取或写入 document.cookie IDL 属性,并阻止对 localStorage 和 openDatabase() 的访问。</p> <p><pre><code>allow-forms</code></pre></p> <p>允许表单提交(即嵌套浏览上下文可以提交表单)。 allow-scripts - 允许脚本执行(但不允许弹出窗口)。</p> <p><pre><code>allow-pointer-lock</code></pre></p> <p>启用指针锁定。 指针锁定提供基于鼠标随时间的移动而不仅仅是鼠标光标的绝对位置的输入方法。指针锁定对于需要大量鼠标输入来控制移动、旋转对象和更改条目的应用程序非常有用。它对于高度可视化的应用程序尤其重要,例如使用第一人称视角的应用程序以及 3D 视图和建模。默认情况下,沙盒 iframe 会阻止指针锁定。此属性允许您在沙盒 iframe 上启用指针锁定。</p> <p><pre><code>allow-popups</code></pre></p> <p>允许弹出窗口。</p> </answer> </body></html>
我正在开发一个项目,需要通过扩展程序捕获网页上 YouTube 嵌入 iframe 的尺寸(宽度和高度),特别是当用户将鼠标悬停在...
有没有办法检查我的reactjs应用程序是否从cordova应用程序打开?
我的问题是cordova 的inappbrowser 不处理pdf。然而,在我们的reactjs应用程序中,我们使用Iframe来显示pdf(它有自己的标题和品牌,因此它不会作为支架打开......
当用户打印时,我的服务器会生成 PDF,我这样做是为了显示 PDF 的打印对话框。 $('').attr('src', url).load(function() { 变种
如何将 <iframe> HTML 代码嵌入到 C# 应用程序中?
如何最有效地将 HTML iframe 嵌入到我的 C# 应用程序中。 比方说这个 YouTube 视频: <question vote="1"> <p>如何最有效地将 HTML iframe 嵌入到我的 C# 应用程序中。</p> <p>让我们看一下这个 YouTube 视频:</p> <pre><code><iframe width="560" height="315" src="//www.youtube.com/embed/UJ53Js0YKZM" frameborder="0" allowfullscreen></iframe> </code></pre> <p>我已经尝试过这个但没有成功:</p> <pre><code>Private Sub InitializeComponent() Dim resources As System.ComponentModel.ComponentResourceManager = New System.ComponentModel.ComponentResourceManager(GetType(frmAbout)) ' 'frmVirtual ' Me.Text = "Virtual" Me.VirtualView = New WebBrowser Me.VirtualView.Navigate("<iframe src='https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sau!4v1481252003737!6m8!1m7!1sF%3A-pwYGx-oWTIk%2FWC6LeJuIxdI%2FAAAAAAAABIg%2FphppDvMZr54JiWnLbsbUgDcTGUfGXLMRACLIB!2m2!1d-33.76525136331761!2d150.9088391438127!3f310!4f0!5f0.7820865974627469' width='600' height='450' frameborder='0' style='border: 0' allowfullscreen></iframe>") Me.SuspendLayout() End Sub </code></pre> <p>C# 应用程序当然是 Windows 窗体应用程序。它不一定是视频,甚至只是一个带有链接的小横幅,当然是在 Iframe 中。请帮忙!</p> </question> <answer tick="false" vote="0"> <p>您可以使用 <a href="http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx" rel="nofollow">WebBrowser</a> 控件来完成此操作。</p> <pre><code>WebBrowser1.Navigate("https://www.youtube.com/embed/UJ53Js0YKZM?autoplay=1"); </code></pre> </answer> <answer tick="false" vote="0"> <p>您不能在 Windows 窗体应用程序中使用 IFrame。然而,有一个名为 System.Windows.Forms.WebBrowser(); 的 Windows 窗体控件;</p> <p>这可以通过导航到工具箱(在 win 表单设计器上)并拖动到网络浏览器(通用控件)来使用。</p> <p>在 Form 类中,您需要类似以下内容。</p> <pre><code>public Form1() { InitializeComponent(); webBrowser1.Navigate("www.youtube.com/embed/UJ53Js0YKZM"); } </code></pre> <p>如果你真的想要一个 iframe,以下可能会起作用</p> <pre><code> private void Form1_Load(object sender, EventArgs e) { var page = @" <html> <body> <iframe width='560' height='315' src='https//www.youtube.com/embed/UJ53Js0YKZM' frameborder='0'> </iframe> </body> <html>"; webBrowser1.DocumentText = page; webBrowser1.ScriptErrorsSuppressed = true; } </code></pre> </answer> <answer tick="false" vote="0"> <p>如果您只想访问一个 YouTube 视频,您可以将该 iframe 代码保存在一个空的 html 文档中,并将 Web 浏览器指向该文档。</p> <pre><code>string applicationDirectory = System.IO.Path.GetDirectoryName(Application.ExecutablePath); string myFile = System.IO.Path.Combine(applicationDirectory, "iFrame.html"); webBrowser1.Url = new Uri("file:///" + myFile); </code></pre> <p>如果您想要更强大的方法,您可以构建 iframe 的 html 并将其作为字符串发送到 web 浏览器的文档。有关如何执行此操作的信息,请参阅<a href="https://stackoverflow.com/questions/5362591/how-to-display-the-string-html-contents-into-webbrowser-control">如何将字符串 html 内容显示到 Web 浏览器控件中?</a>。 </p> </answer> <answer tick="false" vote="0">我有 Windows 10 和 C#、UWP 应用程序。如果您只想显示 <p><code>iFrame</code><pre> 的内容(URL),这对我有用。无需在我的 </pre><code>xaml.cs</code><pre> 文件中编写代码,因为我只想显示一个网站。</pre> </p><code><Grid> <WebView Source ="https://yourwebsite.com" Height="250" Width="650" /> </Grid> </code><pre> </pre>原来的<p><code>iFrame</code><pre>是这样的:</pre> </p><code><iframe style="height:250px; width:650px" src="https://yourwebsite.com></iframe> </code><pre> </pre>对于 YouTube 视频:<p> </p><code><Grid> <WebView Source ="https://www.youtube.com/embed/jJKEkZL9qrM" Height="250" Width="650" /> </Grid> </code><pre> </pre> </answer> <answer tick="false" vote="0"><code><iframe visible="true" runat="server" id="yourid" style="visibility:hidden;display:block;width:1px;height:1px;"></iframe> yourid.Attributes.Add("src", "youtube.com"); </code><pre> </pre> </answer></body>
我正在使用 Iframe 在我的网络和移动应用程序中查看 PDF。它在 Web 应用程序中运行良好,但在 iOS 设备中不起作用。 我也尝试在 IOS 上使用 iframe。我需要知道
这可能听起来很疯狂,但我想这样做。我正在尝试在我的 next.js 应用程序中渲染在另一个应用程序上运行的 Payloadcms 管理仪表板。 以下是我在 next.js 应用程序上的页面...
Facebook iframe 无法在我的网站上加载。我该如何解决它?
我正在尝试将 iframe 添加到网页的右侧,但由于某种原因,刷新页面时 iframe 不会加载。我尝试在 Google 中查看我的开发人员工具,但我看到的只是...
当相机网络应用程序位于 iframe 中时,为什么浏览器会请求相机权限,但其他情况下无需请求权限即可工作?
我有一个使用网络摄像头的简单网络应用程序(内置 Google 应用程序脚本)。当我直接从应用程序 URL 运行它时,相机就可以工作,但是如果我使用allow=... 将应用程序嵌入到 iframe 中
我试图使用 iframe 标签在我的网站中嵌入 Youtube 视频。然而,在使用Chrome时,控制台上会出现很多警告,例如: 在跨站点上下文中读取 cookie 将被阻止
如何绕过登录在我的应用程序中嵌入 Superset Apache 图表
我遇到了一个问题,我在 superset/config.py 中修改了“PUBLIC_ROLE_LIKE_GAMMA = True”,并将数据源添加到 PUBLIC,按照 goo 中的链接建议参考...