iframe 相关问题

“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。

我已在 iframe 中将 Google 地图嵌入到我的网站上： <p>我已将 Google 地图嵌入到我的 iframe 网站中：</p> <pre><code><iframe src="http://www.map-generator.net/extmap.php?name=Spot&amp;address=los%20angeles%2C%20ca&amp;width=614&amp;height=244&amp;maptype=map&amp;zoom=14&amp;hl=en&amp;t=1298011905" width="614" height="244" scrolling="no"></iframe> </code></pre> <p>这是无效的，我需要以某种方式实现 CSS 中的滚动方面。我该怎么做？</p> </question> <answer tick="true" vote="38"> <pre><code><iframe style="overflow:hidden;"></iframe> </code></pre> <p>但它在 Chrome 上不起作用：<a href="https://github.com/davidjbradshaw/iframe-resizer/issues/1142#issuecomment-1959544213" rel="nofollow noreferrer">https://github.com/davidjbradshaw/iframe-resizer/issues/1142#issuecomment-1959544213</a></p> </answer> <answer tick="false" vote="2"> <p><strong>回复晚了</strong></p> <p>到目前为止，我找到的唯一解决方案是将溢出设置为隐藏，并将宽度、高度设置为父 div。</p> <p>您的情况：</p> <pre><code><div style="width:614px; height:244px;"> <iframe src="http://www.map-generator.net/extmap.php?name=Spot&amp;address=los%20angeles%2C%20ca&amp;width=614&amp;height=244&amp;maptype=map&amp;zoom=14&amp;hl=en&amp;t=1298011905"width="614" height="244" style="overflow:hidden; width:614px; height:244px;"></iframe> </div> </code></pre> </answer> <answer tick="false" vote="-1"> <p>我找到了另一个有效的解决方案。</p> <pre><code><iframe src="...." class="frame-abc" scrolling='no' ></iframe> .frame-abc { border:none; overflow:hidden; margin:0; height:230px; width:570px; } </code></pre> </answer> </body></html>

css iframe

回答 0 投票 0

将一个 iframe 覆盖在另一个 iframe 上

我试图通过 javascript 将一个 iframe 覆盖在另一个 iframe 上。我想保持背景 iframe 的宽度和高度为 100%，但第二个 iframe 我希望它看起来稍微小一点......

jquery html iframe

回答 3 投票 0

如何使用 selenium python 单击同意管理器（consentmanager.net）内的按钮？

我正在尝试在网站 https://diablochairs.com/en/ 上使用 Python 中的 Selenium 接受 cookie。我在这方面遇到困难，因为我找不到接受按钮。整个窗户都是

python selenium-webdriver dom iframe shadow

回答 1 投票 0

RoboForm 或 AutoFill 如何识别 iframe 中的文本框

我正在尝试复制 RoboForm 的基本版本 https://help.roboform.com/hc/en-us/articles/360042538712-How-to-use-AutoSave-and-Inplace-AutoFill) 或 Autofill https ://chrome.google.com/webstore/

javascript html google-chrome iframe artificial-intelligence

回答 1 投票 0

更新 - 如何与我无法使用 python-selenium 获得的按钮进行交互？

新版本我想浏览此链接中显示的条款和条件弹出消息，无论是单击“同意”按钮还是“X”按钮关闭窗口，请使用 python-

python selenium-webdriver web-scraping iframe

回答 4 投票 0

iframe之间可以传递ArrayBuffer吗？

我需要在主页和嵌入式 iframe 之间传递大量数据。为了避免[反]序列化开销，我希望通过 postMessage() 传递 ArrayBuffer 并实例化视图

javascript iframe postmessage

回答 2 投票 0

如何在 Iframe 中显示 google 地图

我想在 Razor MVC 页面中显示谷歌地图，但它不显示并出现错误，如下所示：拒绝显示'https://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=

javascript asp.net asp.net-mvc google-maps iframe

回答 4 投票 0

在 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>

html css iframe

回答 0 投票 0

频繁变化的iframe URL

我想用 iframe 制作一个 url 经常更改的交互式地图。 url 会发生变化，因为它考虑了地图的参数（如坐标、激活的图层、缩放级别等）。作为

javascript html url iframe

回答 1 投票 0

禁用其他网站的 iframe 嵌入

我想禁用从我的网站到其他网站的 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>

javascript iframe referer

回答 0 投票 0

防止 touchmove 在嵌入的 iframe 上滚动

我有一个带有嵌入式 iframe 的页面。我通常希望在 touchmove 事件上正常滚动页面。但是，我需要用户能够通过 touc 在 iframe 中“绘制”某些内容...

javascript iframe scroll event-listener non-scrolling

回答 1 投票 0

如何使用 python-selenium 与没有引用标记的 iframe 进行交互？

我想点击此消息上的“同意”按钮（我认为该消息是一个 iframe），以获取一些数据。我遇到的第一个问题是我真的不知道我在处理什么......

python selenium-webdriver web-scraping iframe

回答 1 投票 0

在 Flutter 中显示 Facebook 页面插件

我正在为客户开发 Flutter 应用程序。他们想要宣传他们的业务的 Facebook 页面，该页面向公众开放，不需要登录。在他们的网站上，...

facebook iframe flutter facebook-social-plugins flutterwebviewplugin

回答 2 投票 0

如何使用<iframe>“允许”属性？

根据 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>

html iframe attributes

回答 0 投票 0

抓取嵌套的 YouTube iframe

我正在开发一个项目，需要通过扩展程序捕获网页上 YouTube 嵌入 iframe 的尺寸（宽度和高度），特别是当用户将鼠标悬停在...

javascript iframe youtube

回答 1 投票 0

有没有办法检查我的reactjs应用程序是否从cordova应用程序打开？

我的问题是cordova 的inappbrowser 不处理pdf。然而，在我们的reactjs应用程序中，我们使用Iframe来显示pdf（它有自己的标题和品牌，因此它不会作为支架打开......

reactjs cordova pdf iframe

回答 1 投票 0

如何使用CORS访问iframe

当用户打印时，我的服务器会生成 PDF，我这样做是为了显示 PDF 的打印对话框。 $('').attr('src', url).load(function() { 变种

javascript iframe cors

回答 2 投票 0

如何将 <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>

c# html iframe embed

回答 0 投票 0

Iframe 不兼容移动设备（尤其是 Iphone）

我正在使用 Iframe 在我的网络和移动应用程序中查看 PDF。它在 Web 应用程序中运行良好，但在 iOS 设备中不起作用。我也尝试在 IOS 上使用 iframe。我需要知道

.net iframe pdf-viewer

回答 1 投票 0

是否可以在 iframe 内渲染全栈应用程序？

这可能听起来很疯狂，但我想这样做。我正在尝试在我的 next.js 应用程序中渲染在另一个应用程序上运行的 Payloadcms 管理仪表板。以下是我在 next.js 应用程序上的页面...

next.js iframe payload-cms

回答 1 投票 0

iframe 相关问题

最新问题