“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
我有一个 React 应用程序，其中包含包含 iframe 的组件。我的组件确实根据状态进行安装和卸载（例如 {(showApp === true) && }）。每次我的
我想要将 Excel 工作表嵌入到 Html 中。我尝试在 IFrame 上，但它下载了文件。在其他情况下，Pdf、Iframe 上的图像运行良好。但Excel、Word无法使用。请推荐另一个po...
如何自动停止下载 iframe 中的 PDF 并改为查看文件？
我的网站上有一个 iframe，可以加载 PDF 文件： 但是自动下载了，我想看...
我需要将 Iframe 的大小调整为其完整内容，我正在使用指令，但所有 iframe 都获得了最后一个 iframe 的大小。 <question vote="0"> <p>我需要将 Iframe 的大小调整为其完整内容，我正在使用指令，但所有 iframe 都获得了最后一个 iframe 的大小。</p> <pre><code> <iframe appAdjustIframeHeight frameborder="0" scrolling="no" src="https://www.instagram.com/p/C0KyzD5J4u6/embed/" data-iframe-id="meuIframeId"></iframe> <iframe appAdjustIframeHeight frameborder="0" scrolling="no" src="https://www.instagram.com/p/C1Zt12OuGNt/embed/"></iframe> </code></pre> <pre><code>import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appAdjustIframeHeight]' }) export class AdjustIframeHeightDirective { constructor(private el: ElementRef) { } @HostListener('window:message', ['$event']) onMessage(event: MessageEvent): void { console.log('EVENT', event); const data = JSON.parse(event.data).details; if (data && data.height) { const iframe = this.el.nativeElement as HTMLIFrameElement; iframe.style.height = data.height + 'px'; } } } </code></pre> <p>如何使其独立？</p> </question> <answer tick="false" vote="0"> <p>这是您问题的解决方案。正如我在评论中提到的，关键是在事件中找到一些独特的东西，这样你就可以知道事件来自哪个 iframe。</p> <pre><code> @HostListener('window:message', ['$event']) onMessage(event: MessageEvent): void { if (event.source !== this.el.nativeElement.contentWindow) { return; } const data = JSON.parse(event.data).details; if (data && data.height) { const iframe = this.el.nativeElement as HTMLIFrameElement; iframe.style.height = data.height + 'px'; } } </code></pre> </answer> </body></html>
我的项目中使用的iframe元素的内容是“（站点名称）拒绝连接”。我收到错误，如何修复此错误？ <question vote="6"> <p>我在项目中使用的 iframe 元素的内容是“（站点名称）拒绝连接”。我收到错误，如何修复此错误？</p> <pre><code><iframe src="https://www.google.com/" frameborder="0"></iframe> </code></pre> <p><a href="https://jsfiddle.net/fatihege/2he1nuyf/" rel="nofollow noreferrer">https://jsfiddle.net/fatihege/2he1nuyf/</a></p> </question> <answer tick="false" vote="10"> <p>我几个月来一直试图解决这个问题，终于找到了一个<strong>非常</strong>简单的解决方案，但我没有看到任何人提到过。如果您尝试使用 iframe 包含不允许您访问的网站，请创建您自己的 php 文件，我将其命名为 iframe.php。在该文件中，放入以下内容：</p> <pre><code><!DOCTYPE html><html><?php echo file_get_contents($_REQUEST['url']); ?></html> </code></pre> <p>然后，在您的 iframe 中，使用 src url 'iframe.php?url=http://www.website.com'。</p> </answer> <answer tick="true" vote="3"> <p>这不是您的代码，因为网站可以阻止自己被框架。</p> <p>这是因为根据 mozilla 文档设置了某个标头（X-Frame-Options）： <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> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <iframe src="https://www.google.com/" frameborder="0"></iframe> </body> </html></code></pre> </div> </div> <p></p> <p>但是使用另一个域（example.com）：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <iframe src="https://www.example.com/" frameborder="0"></iframe> </body> </html></code></pre> </div> </div> <p></p> <p>如果您不允许查看该站点，您可以依靠服务器端来执行此操作。基本上，概念是服务器将获取文件并将其附加到给定位置。</p> <p>正如<a href="https://stackoverflow.com/a/66876917/13791656">@Dale的回答</a>所指出的，这可以用php来完成。 对于那些使用其他服务器端语言的人来说，基本上应用相同的原理。 在节点中的实现将类似于：</p> <pre><code>const express = require('express'); const fs = require('fs'); const { execSync } = require('child_process'); const app = new express(); const PORT = 3000; const fetchWebsite = (url) => { execSync(`wget -q -O - ${url} > site.html`, (error, stdout, stderr) => { if (error !== null) { return false; } }); } app.get('/', async (req, res) => { fs.writeFileSync('site.html', '', () => console.log('Created site.html')); fs.createReadStream('site.html').pipe(res); fetchWebsite('https://www.stackoverflow.com'); }); app.listen(PORT, () => {console.log("Listening at port: ", PORT)} ) </code></pre> <p>当然，这假设您使用的是标准 Linux 服务器并且已经安装了 Express 模块。</p> </answer> <answer tick="false" vote="1"> <p>如果您需要在nestjs中编写上述@scoochy的expressjs代码，这可能会有所帮助</p> <pre><code>import { Controller, Get, Response } from '@nestjs/common'; import { execSync } from 'child_process'; import { createReadStream, writeFileSync } from 'fs'; @Controller('iframe') export class IFrameController { fetchWebsite = (url) => { execSync(`wget -q -O - ${url} > site.html`); }; @Get() getFile(@Response() res) { writeFileSync('site.html', ''); createReadStream('site.html').pipe(res); this.fetchWebsite('https://www.stackoverflow.com'); } } </code></pre> </answer> <answer tick="false" vote="1"> <p>关于戴尔上面精彩回答的注释。他写： 然后，在您的 iframe 中，使用 src url 'iframe.php?url=http://www.website.com'。 重要提示：您必须使用 iframe.php 文件的完整 URL，以便 iframe 知道在哪里找到 php 文件。所以<iframe src="https://yoursite.com/iframe.php?url=http://iframedsite.com"... (of course change yoursite to the URL of your site and change iframedsite.com to the site you want to iframe).</p> </answer> <answer tick="false" vote="0"> <p>我要感谢戴尔的建议！</p> <p>如何让它在 WordPress 上运行？ 我将 iframe.php 放在存储 index.html 的同一目录中，但是当我尝试打开该 url 时没有任何反应。</p> <p>提前致谢！</p> </answer> </body></html>
我希望在我的主登录位置有一个 iframe 来显示我公司的一些广告（例如此处的 Salesforce：https://login.salesforce.com/）。现在我的 html 看起来像这样： 我希望在我的主登录位置有一个 iframe 来显示我公司的一些广告（例如此处的 Salesforce：https://login.salesforce.com/）。现在我的 html 看起来像这样： <body> <div id="content"> <!-- Here is my whole b2c-content --> <div id="b2c-content">...</div> <!-- This is the iframe with the ad --> <iframe src="url" title="iFrame title"></iframe> </div> </body> 我的 css 和一切在测试时都工作正常，但是当我将其上传到 b2c 中的 blob 存储并想要在网站上测试它时，iFrame 未显示。另外，当我检查网页时，html 内容中没有 iframe。在检查器中它看起来像这样： <body> <div id="content"> <!-- Here is my whole b2c-content --> <div id="b2c-content">...</div> </div> </body> 有什么好的解决办法吗？ 我也尝试将 iframe 放入单独的容器中，但没有帮助。 我刚刚想通了。我必须在自定义政策的 RelyingParty 中添加以下行： <RelyingParty> <DefaultUserJourney ReferenceId="SignIn" /> <UserJourneyBehaviors> <!-- Added this: Enabling JavaScript --> <ScriptExecution>Allow</ScriptExecution> </UserJourneyBehaviors>
如何确保我的 CSS 内容完美适合 Web 浏览器窗口？ 我面临的问题是，尺寸为宽度 1917.00 x 高度 850.00 的内容超出了边界...
我似乎无法通过 JavaScript 以编程方式切换 Spotify 的 iframe 的播放按钮。 我目前正在关注此链接，但没有运气。虽然我对 javascript 很陌生，而且我只是
我正在 Squarespace 上嵌入一个 iframe 并尝试更改 iframe 背景的颜色以匹配我的网站的背景（#F6F3EA），但它不起作用。我得到了嵌入代码…
访问 iframe 问题 - 用于自动化测试的 python selenium
我正在尝试访问以下 iframe： 但我尝试的所有操作都无法找到它，因此无法找到first_name_value 元素来与文本框交互并填充文本框。 两条路
使用 Python 中的 nodriver 库与 iframe 内的按钮进行交互
我正在使用 Python 开发一个自动化测试项目，并使用一个名为 nodriver 的库。目前，我在选择和单击 iframe 中的按钮时遇到困难，特别是 reCAPT...
下午好。我有一个 Angular JS 应用程序，它可以正确生成 SSRS 报告。但它是硬编码的。我想从配置中提出 url。 为此，我在视图中替换了它： <...
从 aws s3 检索对象并在 Next.js 的网页中显示该对象时出错
我正在构建一个chatpdf应用程序，我想在浏览器上显示pdf，这些pdf作为对象存储在我的s3存储桶中。当我使用下面的代码时，我无法显示 pdf。我是…
项目 顺风 反应 取消缩放 iframe 时，它会扰乱网格内 iframe 的位置。 预期：取消 iframe 缩放后，它应该保持相同的位置，但尺寸减小。
场景 我有一个网站，在桌面浏览器中运行良好，但在移动设备上出现问题。我正在 iframe 中加载 pdf 文件并在模式弹出窗口中显示。但不知道发生了什么
与Material UI网站上的截图类似，我想创建这个“盒子”来保存我的iframe内容，其中包括导航栏、菜单抽屉等。但是，我想利用...
我需要在自托管的 Wordpress 安装中嵌入以下代码 - <p>我需要在自托管 Wordpress 安装中嵌入以下代码 - </p> <pre><code><iframe id="slydy" style = "border: none; max-width: 100%; min-width: 100px;" src = "http://slydy.co/users/TCC/01" width = "648" height = "435" frameborder = "0" marginwidth = "0" marginheight = "0" scrolling = "no" allowfullscreen = "allowfullscreen"> </iframe> </code></pre> <p>但它就是不显示。我已经在至少另外两个 WordPress 博客上安装了相同的软件，并且运行良好。 </p> <p>我需要调整什么设置？ </p> </question> <answer tick="false" vote="7"> <p>可能是以下之一：</p> <ol> <li>如果您的网站是 httpS，那么它会被阻止，因为您的 iframe 是 http。 </li> <li>确保您在帖子编辑屏幕上处于文本（而非视觉）编辑模式</li> <li>WP 缓存？</li> </ol> </answer> <answer tick="false" vote="2"> <p>Wordpress 编辑器会阻止/删除 iframe。尝试使用一些支持 iframe 的插件，例如制作一个简码来制作 iframe。 </p> </answer> <answer tick="false" vote="0"> <p>我不知道为什么，但嵌入在我的网站上运行良好。突然，我注意到嵌入内容仅在 WordPress 自定义模式下显示（在视觉部分）。当我保存更改并关闭定制器时，iframe 嵌入不会显示。经过谷歌搜索后，我找到了解决方案。解决方案是 Iframe 插件，可以在这里找到：<a href="https://wordpress.org/plugins/iframe/" rel="nofollow noreferrer">https://wordpress.org/plugins/iframe/</a></p> <p>在您的网站上启用此插件后，您只需更改以下代码：</p> <p>例如，如果您的 iframe 代码是 <iframe ...........................> ''，则必须将其更改为 [iframe ........................................]。 </p> <p>所以你在这里所做的事情正在改变< with [ and removing the '</iframe</p> <blockquote> <p>'。</p> </blockquote> <p>希望这对某人有帮助。</p> </answer> </body></html>
我正在编写一个网站，作为我所有内容（博客文章、YouTube 视频等）的集合，并希望有一个 YouTube 嵌入页面。我想要两列嵌入，但不知道如何做。我...
我正在尝试使聊天小部件可拖动，我已经通过react-draggable成功地做到了这一点。然而，这个聊天小部件也被 iframe 使用，它完全是通过 HTM 创建的......
是否有任何客户端解决方案可以在具有响应类型应用程序/八位字节流的 iframe 中显示 PDF（而不是下载）？
我从 API 获取一些 PDF，并通过将 URL 设置为 iframe 的 src 在 iframe 中显示它们。想象一下，它类似于 example.com/pdf1.pdf、exmaple.com/pdf2.pdf 等。 一些美国...