iframe 相关问题

使用 iframe 嵌入网站时拒绝连接错误

我尝试使用 iframe 在 HTML 中嵌入网站（完整网站），但在尝试嵌入网站时出现错误。 www.example.com 拒绝连接。 我的代码： <p>我尝试使用 iframe 在 HTML 中嵌入网站（完整网站），但在尝试嵌入网站时出现错误。 <a href="http://www.example.com" rel="nofollow noreferrer">www.example.com</a> 拒绝连接。 我的代码：</p> <pre><code>&lt;iframe src=&#34;https://www.example.com&#34; title=&#34;Example&#34;&gt;&lt;/iframe&gt; </code></pre> </question> <answer tick="false" vote="2"> <p>我在将一个网站嵌入另一个网站（Squarespace）时遇到了同样的问题 X-Frame-Options HTTP 响应标头可用于指示是否允许浏览器以 <pre><code>&lt;frame&gt;</code></pre>、<pre><code>&lt;iframe&gt;</code></pre>、<pre><code>&lt;embed&gt;</code></pre> 或 <pre><code>&lt;object&gt;</code></pre> 呈现页面。网站可以利用这一点来避免点击劫持攻击，确保其内容不会嵌入到其他网站中。 X-Frame-Options 有三种可能的指令：</p> <pre><code>X-Frame-Options: DENY X-Frame-Options: SAMEORIGIN X-Frame-Options: ALLOW-FROM https://toucan-springtail-bftp.squarespace.com/ </code></pre> <p>我使用了3'd选项，ALLOW-FROM后面的URL是你要嵌入的网站的URL。</p> <p>这对我有用！</p> </answer> </body></html>

将标签页更改为 iFrame

我有一个安装在 Facebook 页面上的旧 Facebook 应用程序。选项卡页面没有托管在 iframe 中，而是 Facebook 将 HTML 嵌入到他们的网站中（我认为这称为 FBML...

向来自 Iframe 内的请求添加标头

我的问题相当复杂，我不知道我们目前的做法是否正确。 首先对系统进行总体概述： 我们有多种“服务”（我们所有...

iFrame 不显示视频

我想嵌入 YouTube 视频并从 YouTube 复制了嵌入代码。在这里： <p>我想嵌入 YouTube 视频并从 YouTube 复制了嵌入代码。在这里：<pre><code>&lt;iframe width=&#34;560&#34; height=&#34;315&#34; src=&#34;https://www.youtube.com/embed/sru9ydoxe88?si=cbzk_yu6ybklsogf&#34; title=&#34;youtube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen&gt;&lt;/iframe&gt;</code></pre></p> <p>我尝试嵌入另一个视频，但也不起作用。我尝试在 Ark、Little Ark 和 Safari 中打开它，但在所有这些中都不起作用。</p> </question> <answer tick="false" vote="0"> <p>如果您提供的 iframe 代码未按预期显示 YouTube 视频，您可以检查以下事项：</p> <p>正确的 URL：确保 iframe src 属性中的 URL 正确。它应该指向您要嵌入的 YouTube 视频。在您的情况下，URL 似乎是正确的 (<a href="https://www.youtube.com/embed/sru9ydoxe88?si=cbzk_yu6ybklsogf" rel="nofollow noreferrer">https://www.youtube.com/embed/sru9ydoxe88?si=cbzk_yu6ybklsogf</a>)。</p> <p>URL 参数：URL 中还有其他参数，例如 ?si=cbzk_yu6ybklsogf。嵌入视频可能不需要这些参数。您可以尝试删除它们，看看是否可以解决问题。</p> <p>浏览器兼容性：确保您使用的浏览器支持 iframe 并且是最新的。大多数现代浏览器应该支持 YouTube 的 iframe 嵌入。</p> <p>嵌入内容允许：出于安全原因，某些平台或内容管理系统可能会限制 iframe 的嵌入。如果您要将此代码嵌入到网站或平台上，请确保它们允许嵌入 iframe。</p> <p>JavaScript 执行：如果您使用 JavaScript 操作 DOM 或控制 iframe 的可见性，请确保不存在阻止 iframe 显示的 JavaScript 错误。</p> <p>如果您已检查所有这些方面，但问题仍然存在，请提供有关您尝试嵌入视频的上下文（例如，特定平台、网站或应用程序）的更多详细信息。此外，请检查浏览器的控制台是否有任何可能提供有关问题线索的错误消息。</p> </answer> </body></html>

如何触发iframe在新标签页中加载？

我有一个加载 iFrame 的按钮。我想提供另一个按钮来在新选项卡中打开和加载 iFrame。目前我有打开按钮，基本上复制了页面，但不确定......

将我的网站嵌入到少数几个域

我有一个网络应用程序，我想将其嵌入到不同的网站上。但是，我不希望嵌入可用于所有域。假设 http://mysite1.com 和 http://mysite2.com 嵌入了我的我们...

在 Mobile Safari 上的 iFrame 中显示 PDF 时出现问题

在我们的 Web 应用程序中，我们使用以下代码行在 iframe 中显示 PDF 文档： <question vote="58"> <p>在我们的 Web 应用程序中，我们使用以下代码行在 <pre><code>iframe</code></pre> 中显示 PDF 文档：</p> <pre><code>&lt;iframe id=&#34;iframeContainer&#34; src=&#34;https://example.com/pdfdoc.pdf&#34; style=&#34;width:100%; height:500px;&#34;&gt;&lt;/iframe&gt; </code></pre> <p>这在所有主要桌面浏览器中都可以正常工作，PDF 的宽度可以缩放以适合 iFrame 的范围，并且可以使用垂直滚动条来查看文档中的所有页面。</p> <p>目前我无法让 PDF 在 Mobile Safari 中正确显示。在这种情况下，只有 PDF 的左上部分可见，没有任何水平或垂直滚动条来查看文档的其余部分。</p> <p>有人知道我在 Mobile Safari 中解决此问题的方法吗？</p> <p><strong>更新 - 2013 年 3 月</strong></p> <p>经过几个小时的搜索和实验，我可以得出结论，这个问题真是一团糟！有很多解决方案，但每一个都远非完美。我建议其他遇到此问题的人参考“<a href="https://www.magnolia-cms.com/blog/detail--strategies-for-the-iframe-on-the-ipad-problem-.html" rel="nofollow noreferrer">iPad 上 iFrame 问题的策略</a>”。对我来说，我需要注销这个问题，并为我们的 iPad 用户寻找另一种解决方案。</p> <p><strong>更新 - 2015 年 5 月</strong></p> <p>快速更新一下这个问题。最近我开始使用Google Drive查看器，它基本上解决了原来的问题。只需提供 PDF 文档的完整路径，Google 就会返回 PDF 的 HTML 格式解释（不要忘记设置 <pre><code>embedded=true</code></pre>）。例如</p> <p><a href="https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf" rel="nofollow noreferrer">https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf</a></p> <p>我使用它作为较小视口的后备，只需将上面的链接嵌入到我的<pre><code>&lt;iframe&gt;</code></pre>中。</p> </question> <answer tick="false" vote="11"> <p>我找到了一个新的解决方案。从 iOS 8 开始，移动 Safari 将 PDF 呈现为框架内 HTML 文档中的图像。然后，您可以在 PDF 加载后调整宽度：</p> <pre><code>&lt;iframe id=&#34;theFrame&#34; src=&#34;some.pdf&#34; style=&#34;height:1000px; width:100%;&#34;&gt;&lt;/iframe&gt; &lt;script&gt; document.getElementById(&#34;theFrame&#34;).contentWindow.onload = function() { this.document.getElementsByTagName(&#34;img&#34;)[0].style.width=&#34;100%&#34;; }; &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="5"> <pre><code>&lt;iframe id=&#34;ifamePdf&#34; type=&#34;application/pdf&#34; scrolling=&#34;auto&#34; src={&#34;https://docs.google.com/viewerng/viewer?url=&#34;+&#34;https://example.com/pdfdoc.pdf&#34;+&#34;&amp;embedded=true&#34;} height=&#34;600&#34; &gt;&lt;/iframe&gt; </code></pre> </answer> <answer tick="false" vote="4"> <p>我的解决方案是在移动设备上使用 Google Drive，并在大屏幕上使用 iframe 中嵌入的标准 pdf。</p> <pre><code>.desktop-pdf { display: none; } .mobile-pdf { display: block; } @media only screen and (min-width : 1025px) { .mobile-pdf { display: none; } .desktop-pdf { display: block; } } &lt;div class=&#34;outer-pdf&#34; style=&#34;-webkit-overflow-scrolling: touch; overflow: auto;&#34;&gt; &lt;div class=&#34;pdf&#34;&gt; &lt;iframe class=&#34;desktop-pdf&#34; scrolling=&#34;auto&#34; src=&#34;URL HERE&#34; width=&#34;100%&#34; height=&#34;90%&#34; type=&#39;application/pdf&#39; title=&#34;Title&#34;&gt; &lt;p style=&#34;font-size: 110%;&#34;&gt;&lt;em&gt;There is content being displayed here that your browser doesn&#39;t support.&lt;/em&gt; &lt;a href=&#34;URL HERE&#34; target=&#34;_blank&#34;&gt; Please click here to attempt to view the information in a separate browser window. &lt;/a&gt; Thanks for your patience!&lt;/p&gt; &lt;/iframe&gt; &lt;iframe class=&#34;mobile-pdf&#34; scrolling=&#34;auto&#34; src=&#34;https://drive.google.com/viewerng/viewer?embedded=true&amp;url=URL HERE&#34; width=&#34;100%&#34; height=&#34;90%&#34; type=&#39;application/pdf&#39; title=&#34;Title&#34;&gt; &lt;p style=&#34;font-size: 110%;&#34;&gt;&lt;em&gt;There is content being displayed here that your browser doesn&#39;t support.&lt;/em&gt; &lt;a href=&#34;URL HERE&#34; target=&#34;_blank&#34;&gt; Please click here to attempt to view the information in a separate browser window. &lt;/a&gt; Thanks for your patience!&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p>为了在 2021 年使用 Google 预览版，我必须执行以下操作。对上面的发布方式进行了一些小调整。</p> <pre><code>&#34;https://drive.google.com/viewerng/viewer?embedded=true&amp;url=&#34; + encodeURIComponent(pdfUrl) </code></pre> </answer> <answer tick="false" vote="2"> <p>尝试<pre><code>pdf.js</code></pre>也应该在移动Safari中工作：<a href="https://github.com/mozilla/pdf.js/" rel="nofollow">https://github.com/mozilla/pdf.js/</a></p> </answer> <answer tick="false" vote="-1"> <p>我也遇到了同样的问题。我发现通过将焦点设置在输入上（不适用于 div 标签），会显示 pdf。</p> <p>我通过添加隐藏输入并将焦点设置在其上来修复它。这项解决方案不会减慢应用程序的速度。</p> <pre><code>&lt;html&gt;&lt;head&gt; &lt;script&gt; $(document).ready(function () { $(&#34;#myiframe&#34;).load(function () { setTimeout(function () { $(&#34;.inputforfocus&#34;).focus(); }, 100); }); }); &lt;/script&gt;&lt;/head&gt; &lt;body&gt; &lt;div class=&#34;main&#34;&gt; &lt;div class=&#34;level1&#34;&gt;Learning&lt;/div&gt; &lt;input type=&#34;hidden&#34; class=&#34;inputforfocus&#34;&gt; &lt;div&gt; &lt;iframe src=&#34;PDF/mypdf.pdf&#34; frameborder=&#34;0&#34; id=&#34;myiframe&#34; allow=&#34;fullscreen&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> </body></html>

如何捕获和流式传输 iframe 视频？

在一个网站上，我有一个加载我的游戏的 iframe（从另一个域），我想捕获并流式传输它。我怎样才能实现这个目标？只是用户与其交互时此 iframe 的内容，...

Iframe内点击导致主页URL变化触发GTM事件

我正在开发一个网络项目，我的主页中嵌入了一个 iframe（托管在 cba123.com 上）。在此 iframe 中，有一些链接，单击这些链接会将主页的 URL 更改为

在react中集成jdoodle ide而不是渲染

我正在尝试将 JDoodle IDE 集成到 React 应用程序中。 我正在使用框架库 IDE组件 导出函数 IDE(props: 任意) { 返回 （ <> ...

使用 ref 在 React 中获取 iframe 元素

我有一个包含 iframe 的组件，我想在 React 中访问它的内容，我使用 ref 来处理 iframe，如何从 iframe 获取所有锚点标签 这是我的代码： const GridGenerato...

访问 iframe DOM

我想在调整大小时停止 YouTube 播放 我有一个 iframe <p>我想在调整大小时停止 YouTube 播放</p> <p>我有一个 iframe</p> <pre><code> &lt;iframe id=&#34;tutube&#34; class=&#34;youTubeVideo&#34; frameborder=&#34;0&#34; height=&#34;100%&#34; width=&#34;100%&#34; allowscriptaccess=&#34;always&#34; src=&#34;https://youtube.com/embed/d3cRXJ6Ww44?showinfo=0&amp;autohide=1&amp;enablejsapi=1&#34;&gt; &lt;/iframe&gt; </code></pre> <p>和一个函数</p> <pre><code>function stopTheVideo(){ var div = document.getElementById(&#34;tutube&#34;); var iframe = div.getElementsByTagName(&#34;iframe&#34;)[0].contentWindow; div.style.display = state == &#39;hide&#39; ? &#39;none&#39; : &#39;&#39;; func = state == &#39;hide&#39; ? &#39;pauseVideo&#39; : &#39;playVideo&#39;; iframe.postMessage(&#39;{&#34;event&#34;:&#34;command&#34;,&#34;func&#34;:&#34;&#39; + func + &#39;&#34;,&#34;args&#34;:&#34;&#34;}&#39;, &#39;*&#39;); }; </code></pre> <p>我称之为</p> <pre><code>&lt;body onresize=&#34;stopTheVideo();&#34; </code></pre> <p>我明白了</p> <pre><code>Uncaught TypeError: Cannot read property &#39;contentWindow&#39; of undefinedindex10.html:198 toggleVideoindex10.html:206 resizeFunctionsindex10.html:31 onresize </code></pre> <p>有什么想法吗？</p> </question> <answer tick="true" vote="2"> <p>问题是您的代码期望您的 <pre><code>&lt;iframe&gt;</code></pre> 包含在另一个带有 <pre><code>id=&#34;tutube&#34;</code></pre> 的元素内。 <pre><code>getElementsByTagName()</code></pre> 即使匹配，也不会选择调用它的元素。</p> <p>因此，您可以重构 HTML，使其符合 JS 的期望：</p> <pre><code>&lt;body onresize=&#34;stopTheVideo();&#34;&gt; &lt;div id=&#34;tutube&#34;&gt; &lt;iframe class=&#34;youTubeVideo&#34; frameborder=&#34;0&#34; height=&#34;100%&#34; width=&#34;100%&#34; allowscriptaccess=&#34;always&#34; src=&#34;https://youtube.com/embed/d3cRXJ6Ww44?showinfo=0&amp;autohide=1&amp;enablejsapi=1&#34;&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;script&gt; var state= &#39;hide&#39;; function stopTheVideo(){ var div = document.getElementById(&#34;tutube&#34;); var iframe = div.getElementsByTagName(&#34;iframe&#34;)[0].contentWindow; div.style.display = (state == &#39;hide&#39;) ? &#39;none&#39; : &#39;&#39;; func = (state == &#39;hide&#39;) ? &#39;pauseVideo&#39; : &#39;playVideo&#39;; iframe.postMessage(&#39;{&#34;event&#34;:&#34;command&#34;,&#34;func&#34;:&#34;&#39; + func + &#39;&#34;,&#34;args&#34;:&#34;&#34;}&#39;, &#39;*&#39;); }; &lt;/script&gt; &lt;/body&gt; </code></pre> <p>重写您的 JS，使其与您的 HTML 兼容：</p> <pre><code>function stopTheVideo(){ var iframe = document.getElementById(&#34;tutube&#34;).contentWindow; div.style.display = state == &#39;hide&#39; ? &#39;none&#39; : &#39;&#39;; func = state == &#39;hide&#39; ? &#39;pauseVideo&#39; : &#39;playVideo&#39;; iframe.postMessage(&#39;{&#34;event&#34;:&#34;command&#34;,&#34;func&#34;:&#34;&#39; + func + &#39;&#34;,&#34;args&#34;:&#34;&#34;}&#39;, &#39;*&#39;); }; </code></pre> </answer> </body></html>

调整跨域 Iframe 高度[重复]

我正在尝试将 iframe 高度参数更改为与 iframe 中加载的页面相同的 px。 iframe 中加载的页面来自另一个域。 不同的页面...

iframe 溢出其容器

我正在尝试创建一个与 Wistia 类似的布局 https://home.wistia.com/live/events/pnd98h7ffa?utm_campaign=2023%20Webinar%20Series&utm_medium=email&_hsmi=265945727&_hsenc=p...

页面嵌入的 iFrame 在任何位置都不可点击

我有一个页面https://www.visitmontaione.com/wp4/en/montaione-tuscany-italy/services/，其中嵌入了iframe，但它不可点击。 我不明白为什么。也许有一些脚本...

Youtube - 如何在嵌入链接中强制使用 480p 视频质量 / <iframe>

如何强制 iframe Youtube 视频的 480p 视频质量？ 示例代码： </</desc> <question vote="48"> <p>如何为 iframed Youtube 视频强制使用 480p 视频质量？</p> <p>示例代码：</p> <pre><code>&lt;iframe width=&#34;560&#34; height=&#34;315&#34; src=&#34;http://www.youtube.com/embed/FqRgAs0SOpU&#34; frameborder=&#34;0&#34; allowfullscreen&gt;&lt;/iframe&gt; </code></pre> </question> <answer tick="false" vote="75"> <p>将以下参数附加到 Youtube-URL：</p> <p>144p：&vq=小<br/> 240p：&vq=小<br/> 360p：&vq=中 <br/> 480p：<strong>&vq=大</strong> <br/> 720p：&vq=hd720 <br/></p> <p>例如：</p> <pre><code>src=&#34;http://www.youtube.com/watch?v=oDOXeO9fAg4&#34; </code></pre> <p>变成：</p> <pre><code>src=&#34;http://www.youtube.com/watch?v=oDOXeO9fAg4&amp;vq=large&#34; </code></pre> </answer> <answer tick="false" vote="6"> <p>您还可以使用 1080 高清值：</p> <p>240p：&vq=小、360p：&vq=中、480p：&vq=大、720p：&vq=hd720、<strong>&vq=hd1080</strong></p> </answer> <answer tick="false" vote="2"> <p>我发现，截至 2012 年 5 月，如果您设置帧大小，使最小像素区域（宽度 • 高度）高于特定阈值，则质量会从 360p 提升到 480p（如果您的视频为至少 640 x 360。</p> <p>我发现将嵌入帧的帧大小设置为 <strong>780</strong> x 480 会触发 480p 质量，而不会扭曲视频（按比例放大）。 640 x <strong>585</strong> 也以这种方式工作。我还使用了 <pre><code>&amp;hd=1</code></pre> 参数，但如果您的视频不是以高清（720p 或更高）上传，我怀疑这是否有太大的控制作用。</p> <p>例如：</p> <pre><code>&lt;iframe width=&#34;780&#34; height=&#34;480&#34; src=&#34;http://www.youtube.com/embed/[VIDEO-ID]?rel=0&amp;fs=1&amp;showinfo=0&amp;autohide=1&amp;hd=1&#34;&gt;&lt;/iframe&gt; </code></pre> <p>当然，缺点是通过设置这些静态框架尺寸，您很可能会在侧面或上方和下方看到黑条，具体取决于您的喜好。</p> <p>如果您不关心控件被截断，您可以继续使用 CSS 和 <pre><code>overflow: hidden</code></pre> 将黑条从框架中裁剪出来，前提是您知道视频的确切尺寸。</p> <p>希望这有帮助，并希望嵌入方法很快有一天再次获得离散质量参数！</p> </answer> <answer tick="false" vote="1"> <p>您可以使用 <a href="https://developers.google.com/youtube/js_api_reference" rel="nofollow">YouTube JavaScript 播放器 API</a>，它本身具有设置播放质量的功能。 </p> <pre><code>player.setPlaybackQuality(suggestedQuality:String):Void </code></pre> <blockquote> <p>此功能设置当前视频的建议视频质量。该函数使视频以新质量在当前位置重新加载。如果播放质量确实发生变化，则只会针对正在播放的视频发生变化。调用此函数并不能保证播放质量实际上会改变。但是，如果播放质量确实发生变化，则会触发 onPlaybackQualityChange 事件，并且您的代码应该响应该事件，而不是调用 setPlaybackQuality 函数。 <a href="https://developers.google.com/youtube/js_api_reference#Playback_quality" rel="nofollow">[来源]</a></p> </blockquote> </answer> <answer tick="false" vote="0"> <p>有关此主题的一些更新信息</p> <p><a href="https://developers.google.com/youtube/player_parameters" rel="nofollow noreferrer">https://developers.google.com/youtube/player_parameters</a></p> <p><strong>启用jsapi</strong> 将该参数的值设置为 1 可以通过 IFrame Player API 调用来控制播放器。默认值为 0，这意味着无法使用该 API 控制播放器。</p> <p>...?rel=0&vq=large&enablejsapi=1</p> </answer> <answer tick="false" vote="-2"> <p>您可以使用<pre><code>fmt=</code></pre>参数并根据下表填写值：</p> <p><a href="http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs" rel="nofollow">http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs</a></p> <p>例如：您的网址将变为：</p> <pre><code>http://www.youtube.com/embed/FqRgAs0SOpU?fmt=35 </code></pre> </answer> </body></html>

Twitter 时间轴嵌入无法通过 iframe 正确显示最近的推文。我该如何解决这个问题？

我希望您能帮助我解决我一直面临的问题。 几周前，我网站上嵌入的 Twitter 时间线停止工作。几天前它又开始工作了，但现在小部件

Google 地图嵌入 Iframe 无法正常工作？ 2023

嵌入内容未显示虚拟游览，而是显示整个世界的地图。此问题于 2023 年 11 月 10 日开始，任何人都可以给我任何更新吗？ 点击查看

将 Iframe 标签缩放至更大尺寸

我的 iframe 有问题！如何让iframe的内容填满屏幕？ 先感谢您。 相片： 电流输出 想要的输出 我的 iframe 有问题！如何让iframe的内容填满屏幕？ 提前谢谢您。 照片： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="http://octopi/webcam/?action=stream" style="position:absolute; width:100%; height:100%; overflow:hidden"> Your browser doesn't support iframes </iframe> </div> </body> </html> iframe 的这个样式代码怎么样： iframe{ width:100%; height:100vh; overflow:hidden; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0" style="width:100%; height:100vh; overflow:hidden"> Your browser doesn't support iframes </iframe> </div> </body> </html> 你可以使用这个：高度：100vh 首先为所有使用margin: 0; padding: 0;通用选择器设置*{}，以便所有内容都适合屏幕。 注意：这是重置CSS代码，如果不小心处理，可能会影响其他设计 然后为 iframe 设置 width:100%; height:100vh; overflow:hidden。 这里vh表示视图高度 将 border: 0 solid transparent; 设置为 iframe 以删除边框。 注意：如果你想保留边框，请使用CSS的calc()函数从宽度和高度中减去边框的厚度 然后你的 iframe 将适合屏幕！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <iframe src="https://www.youtube.com/embed/qL-ry_tz6V0"> Your browser doesn't support iframes </iframe> </div> <style> *{ margin: 0; padding: 0; } iframe{ width:100%; height:100vh; overflow:hidden; border: 0 solid transparent; } </style> </body> </html>

如何根据加载的内容自动调整 iframe 的高度

我想自动调整iframe的大小，使其与内容的高度相同我想在页面底部有10px的边距 我想自动调整 iframe 的大小，使其与内容的高度相同我想在页面底部留出 10px 的边距 <!DOCTYPE html> <html lang="nl"> <head> <title>example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/x-icon" href="IMAGES/icoon.png" sizes="128x128"> </head> <body> <header class="menubalk"> <div> <div class="logo"> <a href="home.html" target="mainiframe"><img src="IMAGES/logotransparantbovenbalk.png" alt=""></a> </div> </div> <nav class="menu"> <ul class="navigatieknoppen"> <li><a href="offerte.html" target="mainiframe">Offerte aanvragen</a></li> <li><a href="reviews.html" target="mainiframe">Reviews</a></li> <li><a href="galerij.html" target="mainiframe">Galerij</a></li> <li><a href="contact.html" target="mainiframe">Contact</a></li> </ul> </nav> <div class="login"> <span class="loginicoon"><img src="IMAGES/inlogicoon.png" alt="" class="inlogicoon"></span> <a class="loginlink" href="login.html" target="mainiframe"><u>Login</u></a> </div> </header> <iframe src="home.html" name="mainiframe" id="mainiframe"></iframe> <footer> <div class="logofooter"> <img src="IMAGES/logotransparantbovenbalk.png" alt=""> </div> <div class="copyright"> &copy Rens Ligterink </div> <ul class="contact"> <li>telefoon: <span class="telnummer">0612345678</span></li> <li>e-mail: <a href="mailto:[email protected]" class="mail">[email protected]</a></li> <li>adres: example 2 <br> &nbsp &nbsp &nbsp &nbsp &nbsp 1111 ZX new york</li> </ul> </footer> </body> </html> 这是我网站上的 html，我的 iframe 称为 mainiframe 这是CSS，请告诉我该怎么做，我已经尝试了几件事，但没有任何效果，这是我的CSS： /*index.html*/ /*body*/ body { margin: 0; padding: 0; } /*header*/ .menubalk { background-color: #000000; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .menu { margin: auto; } /*logo in de bovenbalk*/ .logo img { width: 240px; } /*verschillende paginas excl. login*/ .menu ul { list-style: none; display: flex; padding: 0; margin: auto; } .menu li { margin-right: 80px; } .menu a { text-decoration: none; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; } .menu a { margin-top: 10px; } /*login*/ .loginlink { text-decoration: none; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; } .loginicoon { font-size: 10px; align-items: center; } .inlogicoon { width: 24px; padding: 5px; } .login { display: flex; float: right; display: flex; align-items: center; text-align: auto; padding: 40px; } /*het iframe waar de pagina's in worden geladen*/ #mainiframe { /*width: 100%;*/ border: none; /*height: 100%;*/ width: 100%; } /*footer*/ footer { background-color: #000000; display: flex; } .logofooter img { float: left; width: 40%; padding-top: 50px; padding-left: 20px; padding-bottom: 70px; } .copyright { vertical-align: bottom; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 11px; padding-top: 247px; padding-right: 100px; } .contact { list-style: none; float: right; margin-right: 10px; color: #B9B9B9; font-family: Arial Black, sans-serif; font-size: 18px; padding: 30px; } .telnummer { text-decoration: none; color: #E66C1F; } .mail { color: #4F8BC9; text-decoration: none; } /*algemeen*/ .title li { list-style: none; text-align: center; font-family: Arial Black, sans-serif; font-size: 44px; color: #2FC5EE; border-bottom: solid; border-color: #000000; padding-bottom: 50px; padding-top: 40px; } .title ul { padding: 0; } 将此添加到 <head> <!-- other head elements --> <script> const resizeIframe = () => { const iframe = document.getElementById("mainiframe"); const body = document.body, html = document.documentElement; const height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); iframe.style.height = height + "px"; }; window.addEventListener("DOMContentLoaded", resizeIframe); window.addEventListener("resize", resizeIframe); </script> </head> 和一些CSS #mainiframe { border: none; width: 100%; margin-bottom: 10px; }