“iframe”是一个HTML元素，它在文档中创建“内嵌框架”，允许在同一页面中显示单独的文档。
自定义 Shopify 网站购物车页面中的 Paypal 按钮
我希望你一切都好。 我非常非常高兴能跳到这里。 你能帮我一会儿吗？ 我想自定义购物车页面中的 Paypal 按钮。 这里重要的是......
我基本上有与这个问题相反的问题：How to Prevent iframe fromloading while displayed into the DOM? 我希望加载一个未注入 DOM 的 IFRAME 元素。 我是
所以我在Moodle中开发了一个块，它将检测视频播放和暂停状态（在服务器上上传视频）并且一切正常，但今天我有一个新的要求，它应该在Yo上工作...
请任何人都可以帮助我解决这个问题。我想我的网页使用 Ifram 显示 pdf 文件，但我想禁用 ifram 上的右键单击。 我的代码如下 $(文档).contextmenu(fu...
如何使用 X-Frame-Options 标头防止点击劫持攻击
目前，我正在评估其中一个网站的漏洞，我正在考虑的要点之一是如何防止我的网站遭受潜在的点击劫持攻击？ 我不是这方面的专家...
我正在研究显示 PDF 的不同方式，以便更好地完成工作项目。我可以将 PDF 的 url 插入 iframe 元素中，并且它可以很好地显示 PDF。有时我们有...
我正在 JavaScript 中打开一个 iframe： righttop.location = "timesheet_notes.php"; 然后想向它传递信息： righttop.document.notesform.ID_client.value = 客户端； 但显然，...
如何删除在 SharePoint 中加载嵌入项目之前出现的“嵌入预览”？
我的 SharePoint 网站上有一个嵌入项目，加载时会出现一条消息，显示图像损坏，然后显示“嵌入预览”字样。它只显示几秒钟然后...
我在使用 AJAX 发送一些 HTML 代码时遇到问题，请参阅下面的代码 ...</desc> <question vote="0"> <p>我在使用 AJAX 发送一些 HTML 代码时遇到问题，请参阅下面的代码</p> <pre><code><iframe src="http://www.w3schools.com" width="10" height="10" id="awc_frame"></iframe> <script>var iframe = document.getElementById("awc_frame");</script> </code></pre> <p>下面是AJAX代码</p> <pre><code><script> $.ajax({ type: "POST", url: "mobileView.php", data: { val : iframe }, success: function(data){ console.log(data); } }) </script> </code></pre> <p>代码没有将变量发送到 PHP 文件。查看它发送文本的网络方面，即如果我在 iframe 周围放置“”，它会发送此代码 “val = iframe”，但不是 iframe 中的实际代码。 “var iframe”确实起作用并拉回 iframe 的 HTML 代码</p> <p>请告诉我我做错了什么。 </p> <p>提前致谢。</p> <p>编辑：对不起。这不是我需要发送的 iFrame 内的 HTML 代码，而是我需要发送的整个 iFrame 代码。 </p> <p><strong>另一个编辑：当我公司的访问者访问我的网站时，我想要完成什么，我希望 Javascript 或 Jquery 从访问者计算机加载内部网站，然后获取该网站上的所有代码客户端发送到服务器，服务器将整个 iFrame 代码存储在数据库中。</strong></p> </question> <answer tick="false" vote="0"> <p>这将在 iframe 内发送整个 html。</p> <pre><code>var iframe = $('#awc_frame').html(); </code></pre> </answer> <answer tick="false" vote="0"> <p>首先，<pre><code>var iframe</code></pre>不包含 iframe 元素的 HTML - 它包含一个 DOM 节点，它是 iframe 元素的包装器（它包含该元素的各种属性，包括 HTML）。<br/> 接下来，您可能想要等待 iframe 完全加载所有内容，因此您必须绑定到它的 <pre><code>load</code></pre> 事件。</p> <p>这样的东西应该有效：</p> <pre><code>var $iframe = $("#awc_frame"); $iframe.on("load", function () { var iframeHTML = $iframe[0].contentWindow.document.body.innerHTML; // jQuery alternative var iframeHTML = $iframe.contents().find("body").html(); $.ajax({ type: "POST", url: "mobileView.php", data: { val: iframeHTML }, success: function(data){ console.log(data); } }); }); </code></pre> <h3>这个例子中非常重要的事情</h3> <p>还有一件事 - 请注意，对于您自己域之外的网站，此代码将不起作用（由于同源政策）。任何其他代码也不起作用。</p> </answer> <answer tick="false" vote="0"> <p>由于 javascript 在从跨域 iframe 获取 HTML 方面存在问题，因此您无法跨域执行此操作。但是，为什么不直接将 iframe 的 src 属性发送到 PHP 页面，然后使用 file_get_contents 获取 HTML，然后存储它呢？问题已解决：</p> <p>Javascript：</p> <pre><code>var iframe = $('#awc_frame').prop('src'); $.ajax({ type: "POST", url: "posttest.php", data: { val : iframe }, success: function(data){ console.log(data); } }); </code></pre> <p>PHP：</p> <pre><code>$html = file_get_contents($_POST['val']); </code></pre> </answer> <answer tick="false" vote="0"> <p>你想做什么？ </p> <pre><code>var iframe = document.getElementById("awc_frame"); </code></pre> <p>上面的代码是 iframe 的 javascript 对象，其中包含很多属性..由于您使用的是 jQuery，因此可以通过以下方式获得：</p> <pre><code>var iframe = $('#awc_frame'); </code></pre> <p>请记住，上面的代码是 jquery 对象格式中的元素本身，您可以像这样获取元素对象：</p> <pre><code>var iframe = $('#awc_frame')[0]; </code></pre> <p>** 你做错了什么。</p> <p>如果您尝试获取 iframe HTML 内容：</p> <pre><code>var iframe_contents = $("#awc_frame").contents(); </code></pre> <p>如果您详细解释一下您想要做什么，我可以更新我的答案以适合您。</p> <p><strong>* 更新*</strong> 考虑你想做什么..</p> <p><strong>方法#1：（简单方法）</strong></p> <p>您可以使用php来获取您需要的网站内容：</p> <pre><code><?php $contents = file_get_contents('http://www.w3schools.com'); // Saving $contents to database... ?> </code></pre> <p><strong>方法＃2：（困难的方法）</strong></p> <p>正如 @mdziekon 所说，你首先应该等到你的 iframe 加载完毕：</p> <pre><code>var iframe = $("#awc_frame"); iframe.on("load", function () { var contents = $(this)[0].innerHTML; $.ajax({ type: "POST", url: "mobileView.php", data: { val: contents }, success: function(data){ console.log(data); } }); }); </code></pre> <p>希望能解决你的问题</p> </answer> </body></html>
我惊讶地发现以下内容似乎不起作用，因为 DOMContentLoaded 事件没有触发（this.els 是元素的对象）。 this.els.stage_ifr.prop('src', 'templates/'+ee.
[已关闭]Google Recaptcha：阻止来源为“https://www.google.com”的框架访问跨源框架
我已在 vite-react-ts 应用程序中集成了 google recaptcha 并创建了它的构建。 const script = document.createElement('script'); 脚本.src = url; script.async = true; script.defer = true; 是...
iframe 上的 Jquery ajaxError 处理程序不起作用
我正在开发主窗口中有 iframe 文档的应用程序。该 iframe 来自同一公司内的另一个库，但归另一个团队所有，因此无法进行任何更改...
我在 WordPress 网站中集成了 iframe（准确地说是 3D 菜单），但没有构建自己的主题。所以我刚刚在上一页上放置了一个 iframe，其中包含我的 html 代码以及集成的 i...
当我们在单独的选项卡中将一些数据设置到 localStorage 时，我们会遇到一个偶发性问题，然后当我们在另一个域下的 iFrame 中的同一浏览器中加载相同的域时，我们看不到这些数据...
<html> <head></head> <body class="frameBody"> 测试...</desc> <question vote="187"> <pre><code><iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description"> <html> <head></head> <body class="frameBody"> test<br/> </body> </html> </iframe> </code></pre> <p>我想要得到的是：</p> <pre><code>test<br/> </code></pre> </question> <answer tick="false" vote="187"> <p>确切的问题是如何使用纯 JavaScript 而不是 jQuery 来做到这一点。</p> <p>但我总是使用可以在 jQuery 源代码中找到的解决方案。 这只是一行原生 JavaScript。</p> <p>对我来说，这是最好的、易于阅读的，甚至<em>afaik</em>是获取 iframe 内容的最短方法。</p> <p><strong>首先获取你的iframe</strong></p> <pre><code>var iframe = document.getElementById('id_description_iframe'); // or var iframe = document.querySelector('#id_description_iframe'); </code></pre> <p><strong>然后使用jQuery的解决方案</strong></p> <pre><code>var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; </code></pre> <blockquote> <p>它甚至可以在 Internet Explorer 中工作，它在 <pre><code>contentWindow</code></pre> 对象的 <pre><code>iframe</code></pre> 属性期间执行此技巧。大多数其他浏览器使用 <pre><code>contentDocument</code></pre> 属性，这就是我们首先在此 OR 条件下证明该属性的原因。如果未设置，请尝试<pre><code>contentWindow.document</code></pre>。</p> </blockquote> <p><strong>选择 iframe 中的元素</strong></p> <p>然后您通常可以使用 <pre><code>getElementById()</code></pre> 甚至 <pre><code>querySelectorAll()</code></pre> 从 <pre><code>iframeDocument</code></pre> 中选择 DOM 元素：</p> <pre><code>if (!iframeDocument) { throw "iframe couldn't be found in DOM."; } var iframeContent = iframeDocument.getElementById('frameBody'); // or var iframeContent = iframeDocument.querySelectorAll('#frameBody'); </code></pre> <p><strong>在iframe中调用函数</strong></p> <p>仅从 <pre><code>window</code></pre> 获取 <pre><code>iframe</code></pre> 元素来调用一些全局函数、变量或整个库（例如 <pre><code>jQuery</code></pre>）：</p> <pre><code>var iframeWindow = iframe.contentWindow; // you can even call jQuery or other frameworks // if it is loaded inside the iframe iframeContent = iframeWindow.jQuery('#frameBody'); // or iframeContent = iframeWindow.$('#frameBody'); // or even use any other global variable iframeWindow.myVar = window.myVar; // or call a global function var myVar = iframeWindow.myFunction(param1 /*, ... */); </code></pre> <p><strong>注意</strong></p> <p>如果您遵守<a href="http://en.wikipedia.org/wiki/Same-origin_policy" rel="noreferrer">同源策略</a>，这一切都是可能的。</p> </answer> <answer tick="false" vote="74"> <p>使用 JQuery，试试这个：</p> <pre><code>$("#id_description_iframe").contents().find("body").html() </code></pre> </answer> <answer tick="false" vote="59"> <p>它非常适合我：</p> <pre><code>document.getElementById('iframe_id').contentWindow.document.body.innerHTML; </code></pre> </answer> <answer tick="false" vote="26"> <p>据我所知，Iframe 不能这样使用。您需要将其 src 属性指向另一个页面。</p> <p>以下是如何使用平面旧 JavaScript 获取其正文内容。这适用于 IE 和 Firefox。</p> <pre><code>function getFrameContents(){ var iFrame = document.getElementById('id_description_iframe'); var iFrameBody; if ( iFrame.contentDocument ) { // FF iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; } else if ( iFrame.contentWindow ) { // IE iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; } alert(iFrameBody.innerHTML); } </code></pre> </answer> <answer tick="false" vote="10"> <p>在 iframe 中使用 <pre><code>content</code></pre> 和 JS:</p> <pre><code>document.getElementById('id_iframe').contentWindow.document.write('content'); </code></pre> </answer> <answer tick="false" vote="5"> <p>我认为在标签之间放置文本是为无法处理 iframe 的浏览器保留的，即......</p> <pre><code><iframe src ="html_intro.asp" width="100%" height="300"> <p>Your browser does not support iframes.</p> </iframe> </code></pre> <p>您使用“src”属性来设置 iframes html 的源...</p> <p>希望有帮助<strong>:)</strong></p> </answer> <answer tick="false" vote="4"> <p>Chalkey是正确的，需要使用src属性来指定iframe中要包含的页面。如果您执行此操作，并且 iframe 中的文档与父文档位于同一域中，则可以使用以下命令：</p> <pre><code>var e = document.getElementById("id_description_iframe"); if(e != null) { alert(e.contentWindow.document.body.innerHTML); } </code></pre> <p>显然，您可以对内容做一些有用的事情，而不仅仅是将它们放入警报中。</p> </answer> <answer tick="false" vote="2"> <p>以下代码是跨浏览器兼容的。它适用于 IE7、IE8、Fx 3、Safari 和 Chrome，因此无需处理跨浏览器问题。没有在IE6下测试。</p> <pre><code><iframe id="iframeId" name="iframeId">...</iframe> <script type="text/javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && (iframeDoc = window.frames.iframeId.document)) { var iframeBody = iframeDoc.body; var ifromContent = iframeBody.innerHTML; } </script> </code></pre> </answer> <answer tick="false" vote="2"> <p>为了从javascript获取正文内容，我尝试了以下代码：</p> <pre><code>var frameObj = document.getElementById('id_description_iframe'); var frameContent = frameObj.contentWindow.document.body.innerHTML; </code></pre> <p>其中“id_description_iframe”是您的 iframe 的 ID。 这段代码对我来说工作得很好。</p> </answer> <answer tick="false" vote="2"> <p>如果您不仅想选择 iframe 的主体，还想向其中插入一些内容，并使用纯 JS 执行此操作，并且不使用 JQuery，也不使用 document.write()，我有一个没有其他答案的解决方案提供。</p> <p>您可以使用以下步骤</p> <p>1.选择您的 iframe：</p> <pre><code>var iframe = document.getElementById("adblock_iframe"); </code></pre> <p>2.创建一个要插入到框架中的元素，比方说一个图像：</p> <pre><code>var img = document.createElement('img'); img.src = "https://server-name.com/upload/adblock" + id + ".jpg"; img.style.paddingLeft = "450px"; //scale down the image is we have a high resolution screen on the client side if (retina_test_media == true && high_res_test == true) { img.style.width = "200px"; img.style.height = "50px"; } else { img.style.width = "400px"; img.style.height = "100px"; } img.id = "image"; </code></pre> <p>3.将图片元素插入iframe中：</p> <pre><code>iframe.contentWindow.document.body.appendChild(img); </code></pre> </answer> <answer tick="false" vote="1"> <p>一行代码即可获取iframe正文的内容：</p> <pre><code>document.getElementsByTagName('iframe')[0].contentWindow.document.body.innerText; </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>const iframe1 = document.getElementById('iframe1'); const iframeContent = iframe1.contentWindow.document.body.innerHTML; const iframeContentDiv = document.createElement('div'); iframeContentDiv.innerHTML = iframeContent; document.body.appendChild(iframeContentDiv); </code></pre> </answer> </body></html>
我有一个简单的index.html 文件，它包含在iframe 中。我希望 iframe 的高度根据正在显示的内容进行调整。 在我的示例中，iframe 大小将增加...
我想创建一个具有自定义宽度的 iframe。 我不希望 iframe 具有响应性（嵌入在 iframe 中的网站具有响应性），并且我希望它看起来像缩小的图片。 我可以给你...
是否可以在我的 React 应用程序中渲染包含 CSS/JS 的 HTML 文档？
更具体地说，我有一个反应应用程序，该应用程序无法在线，但有可用的文档。 不幸的是，该文档只能通过他们的
浏览器现在是否阻止访问跨源 iframe 内的 localStorage？
我们使用 iframe 设置来允许跨域持久登录。流程如下。 - 登录 https://a.com * 身份验证令牌存储在 localStorage 中 - 访问 https://b.com *...
在 HTML 中嵌入 Apple Music 预览而无需曲目信息
Apple Music 有很好的说明和代码可以在此处嵌入歌曲预览。 <p>Apple Music 有很好的说明和代码来嵌入歌曲预览<a href="https://artists.apple.com/support/1117-apple-music-marketing-tools" rel="nofollow noreferrer">这里</a>。</p> <pre><code><iframe allow="autoplay *; encrypted-media *;" frameborder="0" height="150" style="width:100%;max-width:660px;overflow:hidden;background:transparent;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/album/pancho-and-lefty/1182567204?i=1182567495"></iframe> </code></pre> <p>但是，<pre><code>iframe</code></pre>看起来像这样：</p> <p><a href="https://i.stack.imgur.com/wqZ8P.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3dxWjhQLnBuZw==" alt=""/></a></p> <p>如何创建不显示曲目艺术家、标题和艺术作品的嵌入式代码？滚石乐队好像有<a href="https://www.rollingstone.com/music/music-lists/best-songs-of-all-time-1224767/kanye-west-stronger-1224837/" rel="nofollow noreferrer">这个网站</a>。</p> <p>基本上，我只想要“播放”按钮。</p> <p><a href="https://i.stack.imgur.com/wpq9j.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3dwcTlqLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>隐藏 iframe 某些部分的一种方法（如果它不违反任何使用策略）是使用具有溢出：隐藏 CSS 属性的容器，并为 iframe 提供更大的尺寸或负边距，因此其部分内容不可见。这种方法有一定的局限性，可能无法在所有情况或所有内容上都完美工作。以下是 Spotify 嵌入代码的示例：</p> <pre><code><div style="width:100%; height:80px; overflow:hidden; position:relative; border-radius:12px;"> <iframe style="position:absolute; top:-105px; left:-135px; right:-5px; bottom:-5px; border:none;" src="https://open.spotify.com/embed/track/4Pl8ViAolRF4rK8QBMhKd9?utm_source=generator&theme=0" width="100%" height="152" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> </div> </code></pre> <p><a href="https://i.stack.imgur.com/b5Yxw.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2I1WXh3LnBuZw==" alt=""/></a></p> </answer> </body></html>