Questions tagged «iframe»

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

12
IFRAME和iPad上的Safari，用户如何滚动内容？
根据Apple iOS的口头禅，应该可以通过用两根手指拖动来滚动IFRAME的内容。不幸的是，在iPad上运行最新版本的iOS，我还没有找到一个具有IFRAME的网站，该网站可以使用此方法进行滚动-也不出现滚动条。 有谁知道用户应该如何使用移动Safari滚动IFRAME的内容？
72 html  ipad  iframe  safari  scroll 
8
<iframe>中的srcdoc =“…”和src =“ data：text / html，…”之间有什么区别？
例如，这是它们之间的区别： &lt;iframe srcdoc="&lt;p&gt;Some HTML&lt;/p&gt;"&gt;&lt;/iframe&gt; &lt;iframe src="data:text/html,&lt;p&gt;Some HTML&lt;/p&gt;"&gt;&lt;/iframe&gt; 演示版 并且，如果它们完全相同，为什么HTML5会添加srcdoc属性？ 编辑 也许我还不够清楚。我不是比较src有srcdoc，但src使用text / html的数据URI用srcdoc。 然后，如果功能图是这样的 | src属性| srcdoc属性 -------------------------------------------------- ------------------ 网址| 是的 不使用src（*） HTML内容| 是的，使用数据URI | 是 为什么srcdoc需要？ （*）注意： 似乎srcdoc可以使用带有属性的子框架通过URL（Demo）加载页面src： &lt;iframe srcdoc="&lt;iframe src='http://microsoft.com'&gt;&lt;/iframe&gt;"&gt;&lt;/iframe&gt;
72 html  iframe 
5
如何使用document.getElementById在iframe中选择元素
我有iframe这样的 &lt;iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html"&gt; &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0"&gt; &lt;frame name="page1" src="c.html" scrolling="no"&gt;&lt;/frame&gt; &lt;frame name="page2" src="d.html" &gt; &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body id="top"&gt; &lt;div id="div1"&gt; &lt;div id="div2"&gt; &lt;div id="div3"&gt; &lt;ul id="x"&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;b&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; &lt;/frame&gt; &lt;/frameset&gt; &lt;/html&gt; &lt;/iframe&gt; 我想引用元素“ x”。我尝试了几种方法，但是找不到解决方案。
10
根据其中的内容高度调整iframe的高度
我正在网站上打开博客页面。问题是我可以给iframe设置宽度，但高度应该是动态的，以便iframe中没有滚动条，而且看起来像是一个页面... 我尝试了各种JavaScript代码来计算内容的高度，但是所有这些代码都给出了拒绝访问权限错误，没有用。 &lt;iframe src="http://bagtheplanet.blogspot.com/" name="ifrm" id="ifrm" width="1024px" &gt;&lt;/iframe&gt; 我们可以使用Ajax来计算高度还是使用PHP？
69 php  javascript  ajax  iframe 
4
IE 11第一方会话Cookie在iframe中丢失
我们有一个网站（www.example.com），该网站将用户带到一系列第三方页面以验证付款详细信息，这在iframe中进行。最初，来自www.example.com的本地页面被加载到iframe中，并且用户被重定向到第三方URL。用户完成第三方步骤后，会将它们重定向302到iframe中我们网站（www.example.com）上的页面。 此功能适用于我们测试过的所有浏览器，但IE 11似乎已丢失，但IE 11除外。我们已经在Windows 7和8.1的台式机和“ Metro”模式下检查了此问题，并且所有版本均存在此问题。 当用户浏览我们的网站时，我们会设置一个会话cookie，该会话cookie会正确发送到最初加载到iframe中的第一方页面。但是，一旦用户浏览了该iframe中的某些第三方页面，会话cookie就不会与下一个请求一起发送。 如果我们将IE 11的隐私设置设为最低值，则此问题将消失，并且一切正常。 到目前为止，我发现的所有潜在解决方案都与P3P标头相关。我们已经建立了有效且正确的P3P标头和XML策略文件，并且此问题仅在IE 11中出现。 更新：我们还有其他一些使用JS设置的cookie。这些都按预期持续存在。不同之处在于有效期（对于JS cookie来说是1年，对于会话cookie来说是1个月），域（对于JS cookie来说是“ example.com”，对于会话cookie来说是空）以及它们是否是“仅HTTP”（对于JS是false） cookie，适用于会话cookie）。 我已经尝试根据会话cookie的JS cookie设置所有这些选项，但是没有区别。 更新2：经过更多测试后，我无法创建一个重现此问题的测试用例。我尝试在实时代码中测试的任何其他cookie都似乎已损坏，即使它们设置的代码与可以正常工作的JS cookie完全相同。简而言之; 我还没有找到有效和无效的Cookie模式。 需要注意的一件事可能是，cookie并没有被删除，只是没有被发送到最终请求。如果加载了另一个页面，则cookie会神奇地重新出现并发送；这使我相信这是围绕iframe和P3P的错误。 更新3（第3天）： IE 11对cookie的处理继续让我感到困惑。我越深入迷宫，迷失在不断变化的墙壁中的人就越多。而且这里有鬼。半梦半醒的安全政策的片段编织成某种空灵的生物，每走一步都会跟踪并嘲弄我。刚开始时，我以一种难以捉摸的形式被冻僵，恐惧，震惊，只是在视线之外飞了起来，但是每过一个小时，我就从其邻近性的知识中获得更多的安慰。这可能是我被派到这里面对的那只野兽吗？在这样的时候我怎么能杀死我唯一的同伴？
3
iframe中安全页面上的不安全内容
我正在为客户端开发应用程序，该应用程序将具有SSL证书并在https下提供。但是，为了与现有网站集成，他们希望在iframe中提供导航。 我可以看到这引起了麻烦，因为我希望浏览器抱怨页面上安全内容和不安全内容的混合。我在这里看到过类似的问题，它们似乎都是相反的方式（iframe中的安全内容）。 那么，我想知道的是：是否会导致问题，使iframe中包含不安全的内容并放置在安全页面上，如果是这样，它们将是什么样的问题？ 理想情况下，如果这不是一个好主意（我强烈认为不是），那么我需要能够向客户解释这一点。
68 iframe  ssl 
5
如何比较2个iframe并在视觉上获得差异？
案件 ： 我有2个iframe，并且都有很多div和其他控件，所以两个iframe都像HTML网站的中等大小。我想将两者进行比较并找出差异。 我在这里想到了不同的选择： 解决方案1：拍摄2个iframe的完整屏幕快照，并使用Python的枕头库比较两个屏幕快照，该枕头库在屏幕快照的不匹配区域上绘制网格。但是这里的问题是我在互联网上找不到任何可以获取完整iframe屏幕截图的代码（我的iframe较长且带有滚动条）。我在SO上尝试了几乎所有答案，但是所有答案都适用于正常页面，但不适用于iframe。 参考：https : //blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196 解决方案2：以某种方式从两个iframe中获取所有HTML代码并进行比较，但这很难分析结果，因为它将找到一些不同的HTML代码或两个iframe中存在不匹配的HTML代码。我相信这将更像是文字比较，而不是一个好的解决方案。 因此，我正在寻找可以使用Python或Javascript拍摄iframe完整屏幕截图的代码，或者是可以比较2个iframe并找出差异的更好的选择。 我尝试了谷歌按照以下方法找到的几乎所有答案： 这里提供了示例iframe，其中整个html都位于iframe中：https : //grapesjs.com/demo.html，如果某些代码可以获取此iframe的完整屏幕截图，那么对我来说就很容易比较。
2
我可以在iframe中使用window.location.replace吗？
我们可以使用它window.location.replace来避免历史记录，并定位页面锚，而无需重新加载页面，但不能在iframe中使用吗？ 问题是违反了CSP（内容安全策略），script-src 'unsafe-inline'必须启用该状态。除非我没有定义CSP，即使我定义了一个CSP并允许script-src 'unsafe-inline'它仍然给出相同的违规错误。在ie11 / chrome / ff中得到相同的结果。 iframe位于同一域（位于同一目录中）。 在控制台中定位iframe并在控制台中使用window.location.replace('/samepage.html#onpage_anchor')。 有用。 它以页面锚为目标，而无需重新加载页面和历史记录。 将相同的代码内联在锚链接上，它可以工作。 在外部脚本中使用相同的代码，获取csp违规错误。 如果不在iframe中，则效果很好。 我试图创建一个CSP允许的动作，但即使是在最宽松的内容安全策略可能会允许它。 编辑：所以我将示例放到允许多个文件的插件上，这样我就可以使用引用父/子页面的正确hrefs。 有关示例的示例的注释： 这些示例中未重现该问题。 该脚本即使在iframe中也可以完美运行。但是，相同的代码在我的本地服务器上不起作用，或者当我在VPS上实时运行该代码时。 我怀疑在plunker上不会触发CSP违规，因为plunker通过某种抽象层将内容呈现给浏览器。 第一次单击父级中的手风琴链接时，它会刷新。这是因为页面最初加载的方式没有引用index.html。后续点击将按预期工作，而无需重新加载页面。在iframe中这不是问题，因为它最初会引用child.html 这些是显示代码而无需进行任何更改即可使其工作的很好的示例（如需要更改href使其在stackoverflow代码段中工作，如下所述）。这也很好，因为它显示了javascript应当正常工作。但这并没有显示出实际的问题。您仍然需要在编辑器中加载它，然后在本地服务器或实时托管环境中运行它，才能看到真正的问题。 柱塞示例 有脚本： 无历史记录 无脚本： 有历史记录 简化的代码示例 一键输入的简单手风琴。足以重现问题。 单击打开/关闭将展开/折叠手风琴，不需要JS。JS应该做完全相同的事情，但是没有历史记录。工作正常，但不能在iframe中使用。 代码段注释： 您可以运行该代码段以了解我所描述的内容，但实际上并不能证明问题所在。 该代码段的行为与实际浏览器中的行为不同，JavaScript无法正常工作。 该代码段显示了代码，但应在iframe中运行以查看问题。在iframe外部运行它，以查看差异以及其工作原理。 由于链接如何与JS配合使用（替换整个url），因此它们实际上必须像这样，href="https://stackoverflow.com/thispage.html#ac1"而不是 href="#ac1"像它们出现在代码段中一样（不能以代码段中的实际html页面为目标）。因此，如果您在编辑器中尝试此操作 （请这样做），请记住将链接更改为此格式， this_document.html#anchor以使它们仍然是相同的页面定位点，但是page.html包含在链接中。 显示代码段 $(document).ready(function() { // anchor links without history $.acAnch = function(event) …
4
如何在没有宽高比假设的情况下使iframe响应？
这赏金已经结束。这个问题的答案有资格获得+500声望奖励。赏金宽限期在23小时内结束。 Ferit希望引起更多关于这个问题的注意。 如何在不假定宽高比的情况下使iframe响应？例如，内容可以具有任何宽度或高度，在渲染之前是未知的。 注意，您可以使用Javascript。 例： &lt;div id="iframe-container"&gt; &lt;iframe/&gt; &lt;/div&gt; 调整大小iframe-container以使其内容几乎不能容纳在里面而没有多余的空间，换句话说，有足够的空间容纳内容，因此无需滚动即可显示内容，但没有多余的空间。容器完美地包裹了iframe。 假设内容的纵横比为16：9，这说明了如何使iframe响应。但是在这个问题上，纵横比是可变的。
1
无法使用Safari上的Storage Access API在iframe中设置Cookie
我的页面上有一个iframe。由于Safari阻止了第三方Cookie，我正在尝试使用“开发人员指南”中此处建议的存储访问API：https : //webkit.org/blog/10218/full-third-party-cookie-blocking-and-more /。我从文档中复制了以下代码： &lt;script type="text/javascript"&gt; window.addEventListener('load', () =&gt; { document.getElementById('test-button').addEventListener('click', () =&gt; { document.hasStorageAccess().then(hasAccess =&gt; { console.log('hasAccess: ' + hasAccess); if (!hasAccess) { return document.requestStorageAccess(); } }).then(_ =&gt; { console.log('Now we have first-party storage access!'); document.cookie = "foo=bar"; console.log(`document.cookie: ${document.cookie}`); }).catch(_ =&gt; { console.log('error'); }); }); }); &lt;/script&gt; &lt;button …
2
Safari 13+ iframe阻止CORS Cookie
Safari全面禁止您在与父域不同的域的iframe中设置cookie，这是该死的服务器端CORS标头。 需要说明的是：用户在domainA.com上。domainB.com的iframe已打开，并尝试在iframe中的domainB.com上对用户进行身份验证。Set-Cookie标头是从domainB.com iframe中的服务器返回的，具有所有必需的标头，但Safari不会在后续调用中将其发送回去。 一个旧的解决方法是从iframe提交表单，然后在响应中设置cookie。我猜他们喜欢用户单击某些内容以提交表单的事实。您必须轮询cookie才能看到响应何时返回，因为表单提交没有回调，对于HttpOnly cookie，您不能，但是嘿，它起作用了！直到没有。 然后，最近的解决方法是将用户重定向到全新的窗口/标签中的iframe域，在其中设置随机cookie，从那时起，该子域在iframe中被“信任”。同样，它需要单击以打开新的窗口/选项卡，甚至还可以直观地看到新选项卡的打开。很多安全性，这样的标准。 现在，从Safari 13开始-没有其他解决方法。没有更多安全的iframe cookie设置 🤬 任何其他身份验证方案都不利于我们（例如Auth-X标头）。我们需要使用HttpOnly安全cookie，因为我们不希望该令牌可以以任何方式被javascript客户端访问。 明确地说，所有其他浏览器都可以正常运行。 相关的WebKit Bugzilla 有没有人有什么建议？ 编辑： 感谢您提供的链接@tomschmidt，这似乎是正确的方向。我尝试使用Apple的Storage Access API，但不幸的是，尽管我确保在使用API​​初始化登录逻辑之前请求访问权限： requestStorageAccess = async() =&gt; { return new Promise(resolve =&gt; { //@ts-ignore document.requestStorageAccess().then( function () { console.log('Storage access was granted'); resolve(true); }, function () { console.log('Storage access was denied'); resolve(false); } ); …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.