“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
我创建了自己的网站，我想在其中嵌入一个游戏。我的问题是音频播放了两次，并且 iframe 在游戏下方添加了一些内容。 我构建了游戏并获取了它的 html 格式。 ...
直接在 iframe 中设置 src 可以按预期工作 我正在尝试在此处嵌入 Sharepoint 文档。 例如 <p>直接在 iframe 中设置 src 可以正常工作</p> <p>我正在尝试在此处嵌入 Sharepoint 文档。</p> <p>例如</p> <pre><code><iframe src="https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview" width="476px" height="288px" /> </code></pre> <p>当我在脚本中设置 src 时，它失败了</p> <pre><code><iframe id="x" width="476px" height="288px"></iframe> <script> document.getElementById('x').src = "https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&amp;action=embedview"; </script> </code></pre> <p><a href="https://i.stack.imgur.com/MheeO.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL01oZWVPLnBuZw==" alt=""/></a></p> <p>SharePoint 中明显会发生这种情况。所以我想在这里了解一些事情。</p> <pre><code>1. Am I doing something wrong? 2. Is there any CSP headers which block the parent from adding via JS? 3. Is there any official way from SharePoint to allow this? 3. Is there any way to hack this? </code></pre> <p>提前致谢。</p> <p>由于这种情况发生在 chrome、safari 和 firefox 上，我认为这不是特定浏览器中的错误。</p> </question> <answer tick="false" vote="2"> <p>在 Firefox 中尝试此操作会产生以下错误消息：</p> <blockquote> <p>为了保护您的安全，login.microsoftonline.com 将不允许 如果其他站点嵌入了该页面，则 Firefox 将显示该页面。查看 此页面，您需要在新窗口中打开。</p> </blockquote> <p>打开控制台会显示以下消息：</p> <blockquote> <p>“X-Frame-Options”拒绝在框架中加载 [<em>url</em>] 指令设置为“DENY”。</p> </blockquote> <p>这是由 <pre><code>login.microsoft.com</code></pre> 设置的标头，用于禁用将链接嵌入为 iframe。</p> <p>此链接详细介绍了此设计选择：<a href="https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe</a></p> <p>该链接提到您可以通过设置“AllowFraming”来覆盖该行为，但不建议这样做，因为嵌入它可能会导致网站破坏。</p> <p>可以在<a href="https://answers.microsoft.com/en-us/msoffice/forum/all/office-365-public-site-can-not-be-viewed-in-a-page/65ba2f7b-ce94-4df4-a7d1-1496f8b67dab" rel="nofollow noreferrer">此链接</a></p>找到使用此功能的指南 </answer> <answer tick="false" vote="0"> <p>问题出在 javascript 中，而不是 & 在链接中使用 & 。</p> <pre><code><body> <iframe id="x" width="476px" height="288px"></iframe> <script> document.getElementById('x').src = "https://rocketlane123.sharepoint.com/sites/MyDocsforSP/_layouts/15/Doc.aspx?sourcedoc={6d327004-5d52-4e42-9707-c964631f8e65}&action=embedview"; </script> </body> </code></pre> </answer> </body></html>
我能找到的与我在 SO 上尝试做的最接近的事情是这个，但听起来这不再是一个可行的解决方案，而且它也不是特定于 iFrames 的： 单击 DIV 到下面...
如果我在 iframecontent 中运行脚本，有没有办法获取属性 data-media 的值？ 代码如下所示： <p>如果我在 <pre><code>data-media</code></pre>内容中运行脚本，有没有办法获取属性 <pre><code>iframe</code></pre> 的值？</p> <p>代码如下所示：</p> <pre><code><div id="myDiv"> <iframe data-create-resource-url="http://my.domain.url" data-media="Song" frameborder="0" height="41" src="https://different.domain.url" width="366"> </iframe> </div> </code></pre> <p>我已经尝试了很多方法，例如 <pre><code>window.parent.document</code></pre> 或 <pre><code>top.document</code></pre> 或 <pre><code>window.parent</code></pre> 以及其他可用的解决方案，但似乎不起作用。 </p> </question> <answer tick="true" vote="6"> <p>嗯，你真的不需要访问父级。当您在 iframe 内运行脚本时。 iframe 当前是 iframe 内脚本的窗口。因此，访问窗口元素应该会给出上述的<pre><code>attr</code></pre>。试试这个（未测试）：</p> <pre><code>alert($(window).attr('data-media')); </code></pre> </answer> <answer tick="false" vote="4"> <p>你尝试过这个吗：</p> <pre><code>window.frameElement.getAttribute("data-media"); </code></pre> </answer> <answer tick="false" vote="0"> <p>首先，为你的iframe元素添加一个ID或CLASS（如<pre><code>id='myframe'</code></pre>）<br/> 然后，您可以使用 jquery 访问任何属性：</p> <pre><code>var parent=window.parent.document.getElementById('#myframe'); </code></pre> <p>现在只需获取您的属性（未测试）：</p> <pre><code>myAttr=$(parent).data("my-data-attribute") or myAttr=$(parent).attr("myelement") </code></pre> </answer> </body></html>
我想在我的html页面中显示word文档，我正在使用iframe，嵌入标签来显示 文档，它适用于 pdf 文件，但不适用于 doc 文件，任何人都可以帮助我解决这一问题。它...
我应该如何动态设置 iframe 的尺寸，以便尺寸灵活地适应不同的视口尺寸？ 例如： <p&...</desc> <question vote="29"> <p>我应该如何动态设置 iframe 的尺寸，以便尺寸灵活地适应不同的视口尺寸？</p> <p>例如：</p> <pre><code><iframe src="html_intro.asp" width="100%" height="300"> <p>Hi SOF</p> </iframe> </code></pre> <p>在这种情况下，高度会根据浏览器窗口的大小而有所不同。它应该根据浏览器窗口的大小动态设置。</p> <p>任何尺寸，iframe 的长宽比都应该相同。这怎么办？</p> </question> <answer tick="true" vote="38"> <p>如果你使用jquery，可以使用<pre><code>$(window).height();</code></pre></p>来完成 <pre><code><iframe src="html_intro.asp" width="100%" class="myIframe"> <p>Hi SOF</p> </iframe> <script type="text/javascript" language="javascript"> $('.myIframe').css('height', $(window).height()+'px'); </script> </code></pre> </answer> <answer tick="false" vote="14"> <p>不太确定 300 是什么意思？错字小姐？然而，对于 iframe 来说，最好使用 CSS :) - 我之前发现导入 YouTube 视频时它会忽略内联内容。 </p> <pre><code><style> #myFrame { width:100%; height:100%; } </style> <iframe src="html_intro.asp" id="myFrame"> <p>Hi SOF</p> </iframe> </code></pre> </answer> <answer tick="false" vote="3"> <p><del>您在 iframe 的定义中尝试过 <pre><code>height="100%"</code></pre> 吗？如果您在 CSS 中为“body”添加 <pre><code>height:100%</code></pre>（如果不这样做，100% 将是“100% 的内容”），它似乎会实现您想要的功能。</del></p> <p>编辑：不要这样做。 <pre><code>height</code></pre> 属性（以及 <pre><code>width</code></pre> 属性）必须具有整数作为值，而不是字符串。</p> </answer> <answer tick="false" vote="2"> <p>我发现它在所有浏览器和设备（PC、桌面和移动设备）上效果最佳。</p> <pre><code><script type="text/javascript"> function iframeLoaded() { var iFrameID = document.getElementById('idIframe'); if(iFrameID) { // here you can make the height, I delete it first, then I make it again iFrameID.height = ""; iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; } } </script> <iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe> </code></pre> </answer> <answer tick="false" vote="1"> <p>最新的 CSS 规则将允许您直接使用视口，如下所示：</p> <pre><code><iframe src="html_intro.asp" width="100vw" height="50vh"> <p>Hi SOF</p> </iframe> </code></pre> <hr/> <p>我个人喜欢通过操作其父容器来调整<pre><code>iframes</code></pre>：</p> <pre><code><div class='iframe-parent'> <iframe src="html_intro.asp"> <p>Hi SOF</p> </iframe> </div> </code></pre> <p>现在是CSS：</p> <pre><code>.iframe-parent{ width: 100vw; height: 50vh; } /* Expand to the entire container */ iframe{ width: 100%; height: 100%; } </code></pre> </answer> <answer tick="false" vote="0"> <p>现在可以通过 CSS 宽高比来完成！</p> <p>在 iframe 上设置所需的宽度（例如 100%），然后为您的内容设置适当的宽高比。</p> <pre><code>iframe { aspect-ratio: 4 / 3; width: 100%; } </code></pre> <p>浏览器会根据宽高比自动缩放内容。</p> <p>您可能还想根据您的内容设置最小/最大宽度或高度。</p> <p>您可以自己计算自定义纵横比，或使用像这样的在线实用程序<a href="https://andrew.hedges.name/experiments/aspect_ratio/" rel="nofollow noreferrer">纵横比计算器</a>。</p> </answer> <answer tick="false" vote="-4"> <p><strong>高度因浏览器窗口大小而异。它应该根据浏览器窗口的大小动态设置</strong></p> <pre><code><!DOCTYPE html> <html> <body> <center><h2>Heading</h2></center> <center><p>Paragraph</p></center> <iframe src="url" height="600" width="1350" title="Enter Here"></iframe> </body> </html> </code></pre> </answer> </body></html>
我有一个脚本，当 iframe 中的表单提交并且新内容加载到 iframe 中时，该脚本会将页面滚动到顶部。 document.querySelector("iframe").addEventListener("加载&
如何检测浏览器是否会使用 JavaScript 显示或下载 PDF？
假设我有： 带有 iFrame 的网页： 指向 PDF 文档的 URL：http://www.example.com/file.pdf 一些 JavaScr...
使用python和flask将文件从File_storage发送到前端嵌入到iframe中
在过去的几天里，我一直在尝试将文件发送到我的前端以在 iframe 中渲染，但我一直在努力解决这个问题。我正在使用蟒蛇和烧瓶。 我没有提供任何c...
我有一些网站嵌入了不同的谷歌地图。（iframe）在过去的几个月里我阅读了很多有关数据保护和隐私政策的内容。谷歌地图存在很多风险......
我这里有一个包含 YT 视频的流体 iframe，我试图让包含以下描述的跨度“粘”到 iframe 的底部，无论文本的长度如何。 ...
我的页面中有一个 iframe，当我单击它时，我会显示一个包含信息的小方块。问题是 iframe 通过发布消息给出的坐标是正确的，除非滚动 i...
我正在尝试在 iframe 中加载 pdf，我进行后端调用以获取文件名和文件路径。 然后我将该路径传递到前端以在 src 标记内渲染，但随后它提到了一些内容
我正在尝试使用 iframe 在 React 应用程序上加载 Arxiv PDF 文件（https://arxiv.org/pdf/2404.14619.pdf），但出现以下错误。 混合内容：“https://codepen.io/...”页面...
我有一个多 iframe 页面。我在每个 iframe 中用 JavaScript 生成一个图表，其中标题工具提示记录了图表内容。所有这些都运行良好，除非工具提示显示在底部附近......
我有一个关于在 iFrame 中编辑/删除内容的简单问题。我尝试使用以下方法直接编辑内容： const doc = Frame.contentDocument || Frame.contentWindow.document; $（文档）...
Firefox - iframe - 即使在同源上，“跨源对象上的属性“文档”访问权限也被拒绝
我的网络服务器上有一个 test.pdf 和一个简单的 test.html 文件（使用 https:// 协议）： <p>我的网络服务器上有一个 test.pdf 和一个简单的 test.html 文件（使用 <pre><code>https://</code></pre> 协议）：</p> <pre><code><!doctype html> <html> <head></head> <body> <iframe src="/test.pdf" onload="this.contentWindow.document;"></iframe> </body> </html> </code></pre> <p>我尝试访问 iframe 的内容，它在 Chrome 中工作正常，但在 Firefox 中引发错误：</p> <pre><code>Permission denied to access property "document" on cross-origin object </code></pre> <p>我尝试使用 <pre><code>this.contentDocument</code></pre> （返回 <pre><code>null</code></pre>），并使用 pdf 的完整 URI（仅最后一个字符不同：<pre><code>html</code></pre> -> <pre><code>pdf</code></pre>，所以应该是同一来源），但是我犯了同样的错误。我正在使用 Firefox 的原生 PDF 查看器，如果这很重要的话。</p> <p>这是 Firefox 中的一个错误吗？我是不是做错了什么？</p> </question> <answer tick="false" vote="0"> <p>我也遇到过这个。我怀疑这确实是 Firefox 的一个错误。就我而言，我尝试将 PDF 加载到 iframe 中，然后在加载后打印它。我最终使用了 try/catch 块来解决这个问题：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><a target="printframe" href="/my-pdf">Print</a> <iframe name="printframe" onload="try {this.contentWindow.document.URL == 'about:blank' || this.contentWindow.print()} catch(error) { this.contentWindow.print();}" style="display: None"></iframe></code></pre> </div> </div> <p></p> </answer> </body></html>
如何在 iframe 中使用 Material UI (mui) 5.0？
我正在尝试使用 React Portal 在 iframe 内渲染 MUI 组件。尽管它们是在 iframe 内渲染的，但它们会丢失所有 thMUI 组件，在 iframe 内渲染时也会丢失样式
请原谅可能是重复的问题，其他人的解决方案并没有解决我的问题。我正在开发一个 Hugo 网站并尝试嵌入一个 iframe。该元素显示但我明白了...
Selenium Java：无法访问 iframe 中的元素
我需要访问网页上 iframe id = "myFrame" 内的元素 https://cloud.google.com/products/calculator-legacy 我已经尝试过这个解决方案，但它不起作用： 通过