“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
我想在 Iframe 中显示 pdf，pdf 正在显示，但尺寸很小。我的意思是我每次都必须单击 adobe chrome 工具栏的“适合大小”选项。 这是我正在使用的代码
我有一个一般性问题，我想了解一些信息。 我有一个服务器，在这个服务器上我有一个提交到 API 的 Web 表单。 第三方公司拥有服务器和...
我将 IFrame 嵌入到我的 html 文件中。外部网页代表一个宽度为 1000px、高度为 480px 的画布，如下所示。 我的 IFrame 看起来像这样（我使用 tailwindcss） 我将 IFrame 嵌入到我的 html 文件中。外部网页代表一个宽度为 1000px、高度为 480px 的画布，见下文。 我的 IFrame 看起来像这样（我使用 tailwindcss） <div class="relative flex w-[1005px] h-[490px] border-1" id="iframe-container"> <iframe id="responsive-iframe" src="<external webpage url>" class="w-full h-full" allowfullscreen ></iframe> </div> 当我在移动视图中查看嵌入在 iframe 中的画布时，您可以看到它对于页面来说太大了（参见第一张图片）。我希望 iframe 的内容始终完全可见（参见 image2），但我不知道该怎么做 但是，它应该看起来像这样 我尝试了一些方法，例如通过 javascript 减小尺寸并具有 100% 宽度和高度，但它仍然没有显示我想要的。 我的外部网页如下所示。在预览 div 容器内，将插入尺寸为 1000x480px 的画布 <!DOCTYPE html> <html> <head> <script src="./assets/phaser/phaser.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> html, body { margin: 0; padding: 0; /* width: 100%; */ /* height: 100%; */ } #preview { width: fit-content; height: fit-content; } .testing { width: fit-content; height: fit-content; border: 1px solid red; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <div class="testing"> <div id="preview" name="preview"></div> <script type="module" src="start.js"></script> </div> </body> </html> 使用包装 div 来保持 iframe 的宽高比，方法是在调整宽度以适应不同的屏幕尺寸时调整包装的可用高度。 使用 max-width 和 max-height 设置桌面上的最大尺寸。在手机上，我们不希望出现这些尺寸，因为 iframe 不适合窗口宽度，因此使用 max-height 和 max-width 将允许调整这些尺寸以适应屏幕宽度。 然后，padding-top: 48% 在宽度减小时保持 iframe 的宽高比。该百分比的计算方式为 1000px / 480px = 48%。 在包装器内，让 iframe 填充可用空间。这使其始终在屏幕宽度内完全可见，因为包装器不会超过窗口宽度。 .iframe-wrapper { position: relative; width: 100%; max-width: 1005px; max-height: 490px; padding-top: 48%; overflow: hidden; margin: auto; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div class="flex items-center justify-center min-h-screen bg-gray-100"> <div class="iframe-wrapper"> <iframe id="responsive-iframe" src="<your link>" allowfullscreen></iframe> </div> </div>
我公司的网站通过 PyroCMS 安装运行，该安装的构建成本非常昂贵，但完全无法维护。此外，它是建立在一个不使用标签的平台上的，所以我们的 SEO ...
Flutter iframe，嵌入适用于 Android 和 ios 的谷歌地图
我正在尝试使用谷歌地图中的以下嵌入链接进入我的应用程序屏幕的一部分。虽然使用 FlutterMap 和 Open Street Map 可以工作，但我正在尝试使用嵌入的 Google 地图...
我发现的似乎是如何制作一个在 PayPal 网站上打开新浏览器窗口的按钮。如何创建用于嵌入或 iframe 的表单以放入我自己网站上的网页中？
我正在尝试使用 iframe 和 https://developers.tiktok.com/doc/embed-player?enter_method=left_navigation 将视频嵌入到我的网站中。 当点击移动开发上的任何评论/喜欢/分享按钮时...
无法使用 getElementByClass 获取元素 - 为什么 Adobe Target 无法获取容器值？未在 Adobe Target 中加载 html 内容
通过在控制台添加以下代码： document.getElementsByClassName("容器"); 在 noraml 门户网站下： 通过在控制台中添加代码，我可以获得容器值。 截图
我正在为我的应用程序（基于 Django）的一部分使用第三方（X 公司）服务，该服务位于安全登录后面。 X 的内容在 iframe 中传递，该 iframe 简单地嵌入到我的一个文件夹中...
Microsoft Edge 不会在 iFrame 中显示带有 src="data:application/pdf;..." 的 PDF
为什么edge不显示iframe中的PDF。我收到 0 个错误、警告等。对于 iframe 中的 PDF 是否有任何新的限制，或者该功能是否不再受支持？ 堆栈闪电战：
我正在尝试创建一个网站，该网站将在网站上显示一个 iframe，其侧面有一个面板。 我需要的主要内容是让 iframe 渲染网站，就像它在 1920px 上一样
在 iframe 中运行 Google Analytics？
我们公司与向我们发送流量的联属合作伙伴一起运营一个网站 (oursite.com)。在某些情况下，我们会使用自己的子域 (affiliate.oursite.com) 来设置我们的联营公司，并且他们会显示 sel...
我想镜像一个动态网站，而不将任何链接指向目标网站。 例如：https://www.阿尼手表。 mom/home-1/ 此特定页面镜像此网站 https://animixpl...
如何使用 HTML 中的 iframe 在全屏模式下的视频上添加固定水印？
我正在开发一个项目，需要在 iframe 中以全屏模式显示视频。我想在视频上添加水印，即使全屏处于活动状态，该水印也保持固定在中心......
我有一个应用程序（我们称之为 A ），其中包含应用程序 B 我想将数据从 B（子级）发送到 A（父级） 我可以使用这个代码 window.parent.postMessage(value, '*'); 然后在父级中
如何禁用/查看源代码/和/检查元素/，ctrl + u ctrl+shift+I f12 菜单栏并右键单击，也可以 ctrl + s ctrl p ctrl+v ctrl+a ctrl+c 并拖动选择页，请回答所有部分...
我想允许我的网页嵌入到（其他域）iframe 中。 我应该随服务器的响应一起发送什么特定标头？ 所有资源都需要此标头吗...
为框架祖先生成重复的内容安全策略（Blazor、IIS 和 Chrome）
我已将 Web 应用程序 (sub.domain.com) 发布到 Internet 信息服务 (IIS) 虚拟服务器，现在希望将其显示在 www.otherdomain.com 上的 iFrame 中。已发布的 web.config 文件...
我将 iframe 嵌入到 codepen 中，以便能够使用一些 CSP 设置 我的iFrame设置如下，并设置了沙箱属性 <p>我将 <pre><code>iframe</code></pre> 嵌入到 codepen 中，以便能够使用一些 CSP 设置</p> <p>我的iFrame设置如下，并设置了沙箱属性</p> <pre><code> <iframe src="https://myurl" sandbox="allow-scripts allow-top-navigation allow-top-navigation-by-user-activation allow-forms allow-popups allow-same-origin" style="border: 1px solid black"/> </code></pre> <p>当 iFrame 加载时，当目标 URL 中的脚本运行时，我收到此错误消息</p> <blockquote> <p>不安全的 JavaScript 尝试启动具有原点的框架导航 来自 URL 为“<a href="https://codepen.io" rel="nofollow noreferrer">https://myurl</a>”的框架的“<a href="https://myurl" rel="nofollow noreferrer">https://codepen.io</a>”。框架 尝试导航顶级窗口是沙盒的，但是 'allow-top-navigation' 标志或 未设置“允许用户激活顶部导航”。</p> </blockquote> <p>我很困惑，因为这两个引用都是在我的沙箱属性中设置的（在<pre><code>allow-scripts</code></pre>之后）</p> <p>我错过了什么？</p> </question> <answer tick="false" vote="0"> <p>Codepen 限制了其中代码的权限。在 Codepen 页面上执行“查看源代码”，我打赌您会在您创建的 iframe 周围看到一个外部 iframe，并且外部 iframe 上具有更多限制性的沙箱属性。</p> </answer> </body></html>
可以在我的 web 应用程序上将 iframe 与 vscode.dev 一起使用
我正在开发（Web 应用程序）项目经理，我想知道是否可以将 vscode.dev 或 github.dev 与 iframe 集成，以在我的应用程序中编辑一些代码而不保留它。 用户正在使用 G 登录...