iframe 相关问题

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

Chrome 中的 Iframe 错误:无法从“窗口”读取“localStorage”:此文档的访问被拒绝

我有一个使用本地存储的网络应用程序。现在我们想通过 iframe 将此 Web 应用程序嵌入到其他(第三方)网站上。我们希望提供类似于 youtube 的 iframe 嵌入,以便其他网站可以...

回答 16 投票 0

iframe 内容无法出现在 Firefox 中

下面是我的代码: <p>您的浏览器确实...</desc> <question vote="30"> <p>下面是我的代码:</p> <pre><code>&lt;div style=&#34;border: solid 1px #000000; margin: 5px;&#34;&gt; &lt;iframe src=&#34;http://www.w3schools.com&#34; width=&#34;100%&#34; height=&#34;300px&#34; scrolling=&#34;yes&#34;&gt;&lt;p&gt;Your browser does not support iframe.&lt;/p&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>iframe 的内容在 chrome 中运行良好,但在 firefox 中运行不佳。我已经禁用了附加组件,但我的 iframe 仍然是空的。谁能帮帮我吗? </p> </question> <answer tick="false" vote="23"> <p>如果您尝试在 SSL 加密网站 (https://) 上添加此 Iframe,自 Firefox 23 起它将不再起作用,因为 Mozilla 已决定阻止加密网站上的所有未加密内容(例如 http-iframes)在 https 网站上)。 您可以在自己的 Firefox 安装中更改此行为,方法是在地址栏中键入 <pre><code>about:config</code></pre> 并将 <pre><code>security.mixed_content.block_active_content</code></pre> 设置为 <pre><code>false</code></pre>。 但这对您网站上的所有其他 FF23 访问者没有帮助。 </p> </answer> <answer tick="false" vote="16"> <p>截至 05/2018,由于 X-Frame-Options 标头设置为“sameorigin”,iframe 线索被浏览器拒绝。</p> <p>用 Firefox 测试页面并得到空白 iframe。 控制台的内容如下:</p> <pre><code>Load denied by X-Frame-Options: https://www.w3schools.com/ does not permit cross-origin framing. </code></pre> <p>为什么?我会给 Chrome 控制台一个机会,它是这样的:</p> <pre><code>Refused to display &#39;https://www.w3schools.com/&#39; in a frame because it set &#39;X-Frame-Options&#39; to &#39;sameorigin&#39;. </code></pre> <p>基本上,X-Frame-Options 标头(不要与 CORS 混淆)设置为“sameorigin”,这意味着仅当嵌入在相同域和相同协议中时才允许浏览器显示 iframe 内容(<a href="https://www.w3schools.com/" rel="noreferrer">https: //www.w3schools.com/</a> 与 <a href="http://www.w3schools.com/" rel="noreferrer">http://www.w3schools.com/</a>) 不同。</p> <p>这里有一些关于 x-frame-options 的文档: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options</a></p> </answer> <answer tick="false" vote="2"> <p>我不知道它是否相关,但是当我尝试通过 c# 请求 w3schools 时,它响应 503 禁止错误。所以他们可能会使用一些东西来阻止出现在 iframe 等上。Facebook 有类似的限制,除非你登录,否则你无法显示他们的 Likebox iframe。 </p> </answer> <answer tick="false" vote="1"> <p>我也有同样的问题。对我来说,原因是网址末尾的斜杠。</p> <p>不起作用:</p> <pre><code>&lt;iframe src=&#34;http://example.com/some/sub/folder/&#34;&gt;&lt;/iframe&gt; </code></pre> <p>作品:</p> <pre><code>&lt;iframe src=&#34;http://example.com/some/sub/folder&#34;&gt;&lt;/iframe&gt; </code></pre> </answer> <answer tick="false" vote="1"> <p>为什么还没人提到 CORS?</p> <p>来自 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" rel="nofollow noreferrer"><strong>MDN</strong></a> </p> <blockquote> <p>跨源资源共享(CORS)是一种使用 额外的 HTTP 标头,让用户代理获得访问权限 从不同来源(域)的服务器选择的资源 当前正在使用的站点。用户代理创建跨域 HTTP 当请求来自不同域、协议的资源时, 或端口不是当前文档的来源。</p> <p>跨域请求的示例:提供的 HTML 页面 <a href="http://domain-a.com" rel="nofollow noreferrer">http://domain-a.com</a> 发出 src 请求 <a href="http://domain-b.com/image.jpg" rel="nofollow noreferrer">http://domain-b.com/image.jpg</a>。今天网络上的许多页面都会加载 来自单独的 CSS 样式表、图像和脚本等资源 域,例如内容分发网络 (CDN)。</p> <p>出于安全原因,浏览器限制跨域HTTP请求 从脚本内部启动。例如,XMLHttpRequest 和 Fetch API遵循同源策略。这意味着一个网络 使用这些 API 的应用程序只能从以下位置请求 HTTP 资源: 加载应用程序的同一域,除非 CORS 标头是 使用过。</p> </blockquote> <p>这意味着您尝试从 iframe 进入的网站被设置为拒绝来自您的网站或其他网站(如果不是全部)的请求。</p> </answer> <answer tick="false" vote="0"> <p>如果您在使用 <strong>Django</strong> 时遇到问题,您需要在设置中设置以下选项:</p> <pre><code>X_FRAME_OPTIONS = &#34;SAMEORIGIN&#34; </code></pre> <p>如<a href="https://docs.djangoproject.com/en/dev/ref/clickjacking/#how-to-use-it" rel="nofollow noreferrer">此处</a>所述。默认值设置为 <pre><code>DENY</code></pre>,因此会阻止所有尝试。</p> </answer> <answer tick="false" vote="-1"> <p>您需要在本地主机上有 iframe 的源文件。 </p> <p>Firefox 和 Chrome 不显示此 iframe:</p> <pre><code>&lt;iframe src=&#34;https://www.yourdomain.com/form.html&#34;&gt;&lt;/iframe&gt; </code></pre> <p>作品:</p> <pre><code>&lt;iframe src=&#34;/form.html&#34;&gt;&lt;/iframe&gt; </code></pre> </answer> </body></html>

回答 0 投票 0

如何使用 iframe 沙箱阻止 Apps.Microsoft.com cookie?

我想将 Microsoft Store(我们的应用程序页面)嵌入到我们的网站中,但我不希望他们创建任何 cookie。如何显示 Microsoft App Store 信息而不允许他们...

回答 1 投票 0

如何确保我的 iframe 占据屏幕的整个宽度和高度,而不考虑任何宽度限制

所以我有一个使用 iframe 构建的小部件,并将其提供给这样的用户 <p>所以我有一个使用 iframe 构建的小部件,并将其提供给这样的用户</p> <pre><code>&lt;div style=&#34;height: 100px; width: 100px&#34;&gt; &lt;iframe src=&#34;https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&amp;type=popup&#34; style=&#34;border: 0;&#34; height=&#34;100vh&#34; width=&#34;100vw&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>因此用户可以在容器 div 中设置高度和宽度,如上所示。我现在的问题是,在 iframe 中,我有一个通过单击按钮打开的模式,所以我希望这个模式占据用户屏幕的整个宽度和高度,但相反,它受到包含div</p> <p>下面是我的 iframe 中的代码:</p> <pre><code>/** @format */ import { Modal, ModalOverlay, ModalContent, ModalBody, useDisclosure, Box, } from &#34;@chakra-ui/react&#34;; import CheckoutInfo from &#34;./CheckoutCard&#34;; import { Button } from &#34;mainstack-design-system&#34;; import { useEffect, useState } from &#34;react&#34;; import { TPaymentOptions, TProductDataRes } from &#34;types&#34;; import StripeCardCheckout from &#34;./StripeCardCheckout&#34;; interface IProps { width: string | null; productId: string; btnText?: string; } const PopupCheckout = ({ width, productId, btnText }: IProps) =&gt; { const { isOpen, onOpen, onClose } = useDisclosure(); const [openModal,setOpenModal] = useState(false) const [paymentOption, setPaymentOption] = useState&lt;TPaymentOptions&gt;(&#34;&#34;); const [productData, setProductData] = useState&lt;TProductDataRes&gt;( {} as TProductDataRes ); const ipAddress = JSON.parse(window.localStorage.getItem(&#34;userIp&#34;)); const isNigerian = ipAddress?.currency === &#34;NGN&#34;; useEffect(()=&gt;{ setOpenModal(true) },[]) return ( &lt;&gt; &lt;Button variant=&#34;primary&#34; onClick={onOpen} label={btnText ?? &#34;Proceed to checkout&#34;} size=&#34;medium&#34; /&gt; &lt;Modal isOpen={openModal} onClose={onClose}&gt; &lt;ModalOverlay /&gt; &lt;ModalContent className=&#34;modal&#34; borderRadius={&#39;0.75rem&#39;} maxWidth={width} // w={&#34;95%&#34;} // maxH={&#34;90vh&#34;} overflow={&#34;scroll&#34;} &gt; &lt;ModalBody padding={0}&gt; &lt;CheckoutInfo hasBorder hasCancel closeModal={() =&gt; setOpenModal(false)} paymentOption={paymentOption} setPaymentOption={setPaymentOption} productId={productId} setProductData={setProductData} /&gt; {paymentOption === &#34;card&#34; &amp;&amp; !isNigerian &amp;&amp; ( &lt;StripeCardCheckout setPaymentOption={setPaymentOption} productData={productData} closePopup={() =&gt; setOpenModal(false)} /&gt; )} &lt;/ModalBody&gt; &lt;/ModalContent&gt; &lt;/Modal&gt; &lt;/&gt; ); }; export default PopupCheckout; </code></pre> <p>以下是用户如何调用它:</p> <pre><code>&lt;div style=&#34;height: 100vh;&#34;&gt; &lt;iframe src=&#34;https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&amp;type=popup&#34; style=&#34;border: 0;&#34; height=&#34;100%&#34; width=&#34;100%&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> </question> <answer tick="false" vote="0"> <p>潜在的解决方案:向模态和 iframe 本身添加样式..</p> <pre><code>import { Modal, ModalOverlay, ModalContent, ModalBody, useDisclosure, } from &#34;@chakra-ui/react&#34;; import CheckoutInfo from &#34;./CheckoutCard&#34;; import { Button } from &#34;mainstack-design-system&#34;; import { useEffect, useState } from &#34;react&#34;; import { TPaymentOptions, TProductDataRes } from &#34;types&#34;; import StripeCardCheckout from &#34;./StripeCardCheckout&#34;; interface IProps { width: string | null; productId: string; btnText?: string; } const PopupCheckout = ({ width, productId, btnText }: IProps) =&gt; { const { isOpen, onOpen, onClose } = useDisclosure(); const [paymentOption, setPaymentOption] = useState&lt;TPaymentOptions&gt;(&#34;&#34;); const [productData, setProductData] = useState&lt;TProductDataRes&gt;( {} as TProductDataRes ); const ipAddress = JSON.parse(window.localStorage.getItem(&#34;userIp&#34;)); const isNigerian = ipAddress?.currency === &#34;NGN&#34;; useEffect(() =&gt; { onOpen(); }, [onOpen]); return ( &lt;&gt; &lt;Button variant=&#34;primary&#34; onClick={onOpen} label={btnText ?? &#34;Proceed to checkout&#34;} size=&#34;medium&#34; /&gt; &lt;Modal isOpen={isOpen} onClose={onClose} size=&#34;fullScreen&#34;&gt; &lt;ModalOverlay /&gt; &lt;ModalContent className=&#34;modal&#34; borderRadius={&#39;0.75rem&#39;} maxWidth={width} &gt; &lt;ModalBody padding={0}&gt; &lt;CheckoutInfo hasBorder hasCancel closeModal={onClose} paymentOption={paymentOption} setPaymentOption={setPaymentOption} productId={productId} setProductData={setProductData} /&gt; {paymentOption === &#34;card&#34; &amp;&amp; !isNigerian &amp;&amp; ( &lt;StripeCardCheckout setPaymentOption={setPaymentOption} productData={productData} closePopup={onClose} /&gt; )} &lt;/ModalBody&gt; &lt;/ModalContent&gt; &lt;/Modal&gt; &lt;/&gt; ); }; export default PopupCheckout; </code></pre> <p>iframe</p> <pre><code>return (&lt;div style=&#34;height: 100vh;&#34;&gt; &lt;iframe src=&#34;https://jade-biscuit-7026ef.netlify.app/?productId=LprOsWjrho5B&amp;type=popup&#34; style=&#34;border: 0; width: 100%; height: 100%;&#34; onLoad={(e) =&gt; { const iframeDocument = e.target.contentDocument; const styleTag = iframeDocument.createElement(&#39;style&#39;); styleTag.innerHTML = ` /* Add your custom styles here */ body { margin: 0; overflow: hidden; } `; iframeDocument.head.appendChild(styleTag); }} &gt;&lt;/iframe&gt; &lt;/div&gt;) </code></pre> </answer> <answer tick="false" vote="0"> <p>您可以设置内联样式,使 iframe 的宽度和高度为其父级的 100%</p> </answer> </body></html>

回答 0 投票 0

使用微调器加载 Iframe

此代码正确加载微调器,但加载完成后如何隐藏它? 内联框架{ 背景图像: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif"); 背景...

回答 7 投票 0

如何确保 Excel iframe 使用静态链接进行更新?

我有一个 Excel 嵌入的 iframe,它有一个静态源 URL,但即使在我更改源内容后,我的 iframe 也不会更新。 我认为它缓存在他们的服务器上,我不知道如何修复...

回答 1 投票 0

绝对定位+滚动的iframe?

该网站的基础是 iframe,一次仅显示 1 个。我的问题是 iframe 不滚动,这是绝对位置的问题。我尝试将每个 iframe 包装在自己的

回答 1 投票 0

如何检查 iframe 嵌入的 Youtube 视频是否结束?

我通过 Iframe 加载 YouTube 视频。是否可以检查 YouTube 视频在这种状态下是否结束?我可以通过 Iframe 使用 OnStateChange() 吗?

回答 3 投票 0

访问 iframe 外部的元素

我有一个文件:1.html,里面有一个iframe。 我想从 iframe 访问 1.html (iframe 外部)中存在的元素(假设是 myelement)。 我怎样才能做到这一点? 我试过: 顶。

回答 5 投票 0

为什么在iframe中动态添加滚动条伪类会导致浏览器崩溃?

1.在html中添加一个新的iframe: 2. 添加以下内容...

回答 1 投票 0

尝试登录具有 iframe 登录部分的网站?

第一次遇到iFrames之类的。刚刚学习了 Python 的基础知识,并创建了一个类似的脚本来登录网站。然而,有了这个特定的网站,我无法超越我...

回答 1 投票 0

拒绝构建“https://sis-t.redsys.es:25443/”,因为祖先违反了以下内容安全策略:“frame-ancestors 'none'”

集成桑坦德银行信用卡支付网关集成问题: 我从此链接获取代码:https://desarrolladores.santandertpv.es/conexion-insite.html(下面部分:Solicitud de la operación...

回答 2 投票 0

如何使用 Cypress 在 iFrame 中打字

我正在使用测试站点构建 Cypress E2E 测试框架。 我无法在 iFrame 文本区域内输入内容。 这是实际的 iFrame: https://the-internet.herokuapp.com/iframe 我可以开始了...

回答 1 投票 0

window.postMessage 在 Azure Web App 中失败且没有错误消息

我有一个 .NET 4.8 项目,主窗口内有一个 iframe。我们使用window.postMessage,以便框架可以在加载特定页面时最小化侧边栏。 这在托管时效果很好...

回答 1 投票 0

赛普拉斯 Iframe 找不到 0.contentDocument

我正在尝试对需要上传用户的应用程序运行一些测试。我们使用 usecsv 来处理页面 iframe 中上传的文档。当尝试使用多种不同的方法时...

回答 1 投票 0

使用Python + Selenium选择shelly

所以我是在 Python 中使用 Selenium 的新手。我想访问特定网站上的 xpath。 要访问该网站,必须首先使用帐户登录,所以我的问题并不能真正重现...

回答 1 投票 0

Soundcloud iframe 参数列表?

我正在开发 CMS,希望让用户嵌入 Soundcloud 音乐和播放列表。 我想避免摆弄 API - 因为它似乎没有必要:) 相反,我只是拼凑一个

回答 2 投票 0

在调整大小时定位包含 youtube 视频的 iframe

我有一个使用 Youtube API 嵌入的 YouTube 视频,以便能够利用自动播放等功能。我真的不是网页设计师,而且我遇到了一些问题。我无法动弹,...

回答 1 投票 0

使用 tampermonkey 阻止网站上的 2 个内容

我想用 tampermonkey 阻止网站 (www.exemple.com) 上的 2 个内容: 网站上的所有 iframe div id="dodo" 我已经尝试过这个(到 Id="dodo"),但它不起作用 : // ==用户...

回答 1 投票 0

在我的应用程序中嵌入了 PDF,但它告诉我手动打开它

我有一个 React 应用程序,我从服务器获取一个包含 PDF 的 URL,虽然我可以查看它,但我的团队成员却以不同的方式看到它。奇怪的是,对于他们来说,它正常打开于

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.