Web浏览器或Internet浏览器是用于在万维网上检索，呈现和遍历信息资源的软件应用程序。
我正在尝试了解一些基本的 HTML / HTTP 行为。 给出以下非常简单的 HTML 代码： 我正在尝试了解一些基本的 HTML / HTTP 行为。 给出以下非常简单的 HTML 代码： <html> <head></head> <body> <a href="page2.php" >Page 2</a> <img src="sample.jpg" /> </body> </html> 如果图像加载大约需要 20 秒，并且在此期间您单击指向另一个页面的链接，则浏览器不会立即导航离开，而是会等待一段时间。如果页面上有很多图像，情况会变得更加极端。 这是为什么呢？这是正确的行为还是我错过了什么？ 我可以通过在点击事件上调用 window.stop() 来解决这个问题，但我只是不敢相信这实际上是必需的！ 除非页面完全加载，否则链接不应导航，这是正确的浏览器行为！ 因此，当选项卡仍处于 “正在加载...” 阶段时单击链接，不应执行任何操作，但您始终可以以推迟可能需要很长时间才能完成的操作的方式重写代码，如下所示... <html> <head></head> <body onload=”LoadImages();”> <script> function LoadImages(){ // defer image loading, one can also add a delay Img1.src='https/someplace/image1.jpg'; Img2.src='https/someplace/image2.jpg'; } </script> <a href="page2.php" >Page 2</a> <img id="Img1" src="about:blank" /> <img id="Img2" src="about:blank" /> </body> </html> 我们在这里实现的是，文档现在加载速度更快，链接尽早变得可操作，而法师则试图在后台自行整理。 如果您只有一两张图像，还有另一种更简单的方法... <img src="x" onerror="this.onerror=null; this.src='https/someplace/image1.jpg';"/> 这也将使页面加载速度更快，并允许在图像在后台自行整理时运行链接。
这是我的第一个烧瓶代码，我遇到了错误？你能识别这些错误并告诉我解决方案吗
从烧瓶导入烧瓶 应用=烧瓶(__name__) @app.route('/你好/') def 你好（名字）： 返回 'Hello %s' % 姓名 如果 __name__=='__main__': 应用程序运行（调试=真） 为什么我会收到...
最近的浏览器允许使用 CTRL +- 、CTRL-鼠标滚轮以及触控板上的两根手指捏合手势来更改缩放级别。虽然我自己觉得这个功能非常方便（各种
有没有办法在 NW.js 应用程序中录制和保存所有播放的音频？
我想录制 NW.js 应用程序发出的声音并将其保存到文件中。 我有一个可用的单例 AudioContext，但我希望它能够在扬声器中录制和播放。 我试图创建一个假的
我需要建议！我想在 PS 结账表单中禁用浏览器自动填充功能 我承认我已经尝试过： -autocomplete="off" 在表单和所有输入上不起作用； 我尝试更换
我有一个使用 Auth0 的 Vue 应用程序。我收到以下事件序列： 用户访问https://example.com/myapp/dev/?myparam，点击登录 用户在Auth0登录页面登录 浏览器重定向至原始页面
刚刚询问如何使用 javascript 检查是否存在互联网连接，并得到了一些很好的答案。 在 Ruby 中执行此操作最简单的方法是什么？ 在尝试将生成的 html 标记代码设置为 cl...
如何等待文件（例如“sunny.png”）并在使用 JavaScript 加载文件时发送警报。 网络选项卡示例 我的初衷是等待整个页面加载，但是
我正在构建一个网络应用程序，它使用“使用 Apple 登录”进行正常授权和登录。 注册后，用户应创建一个密码，该密码通过 KDF 增强并充当对称...
我正在开发一个在线测试应用程序，要求在测试过程中，用户不能刷新页面，也不能返回，直到测试结束。我已经成功地拒绝了...
假设有人正在编写一个浏览器扩展或一个用户脚本，旨在保存网站中的数据（如何保存数据超出了本问题的范围）。现在，假设一个网站加载了一些数据并且
我正在开发一个需要离线存储数据的网站。即，如果网络出现故障，数据会本地存储在客户端的 PC 上，并在用户下次上线时发送到服务器...
场景： 我们公司运行的报告工具已升级到新版本。通过浏览器中的 URL 访问：www.company.de/programm/v8/client/ 用户能够保存浏览器
我用Vite Vue Ionic Capacitor 5（最新版本）和SQLite构建了一个应用程序。我尝试使用@capacitor-community/sqlite 实现包。在移动模拟器上一切运行良好，但在浏览器 jeep-sqlite 中。
如何使用基于应用程序的路由来防止 nextjs 13 中的浏览器后退按钮导航？
我有一个防止浏览器后退按钮单击的代码，但是当我尝试实现它时，我最终遇到了以下错误 未处理的运行时错误 错误：NextRouter 未安装。 https://nex...
如何在 JavaScript 中在运行时获取所有应用到 Web 元素的 CSS 值？
我的目标是获取在运行时应用于给定 Web 元素的所有 CSS 属性（及其相应的值）。具体来说，我正在使用 Java 进行编码并使用 Selenium 来运行
在 iOS 设备 Linkedin 应用程序上的外部浏览器中打开链接时出现问题
我写信给您是关于在 iOS 设备上使用 LinkedIn 应用程序时出现的问题。当用户在 LinkedIn 浏览器中打开指向我们网站的链接时，他们会遇到困难...
我曾经相信HTML页面的CONTENT-TYPE标头告诉浏览器内容是否是html。我有一个代理编码，我正在检查内容类型是否有 text/html 来决定它是否......
如何访问沙盒 iframe 内嵌套 iframe 的 iframe.contentWindow.document？
我想创建一个沙盒（frame1），以便它仍然可以运行脚本但无法访问其父级。我还希望frame1能够创建一个内部沙盒iframe（frame2），c...</desc> <question vote="1"> <p>我想创建一个沙盒<pre><code><iframe></code></pre>（<em>frame1</em>），以便它仍然可以运行脚本但无法访问其父级。我还希望 <em>frame1</em> 能够创建一个无法运行任何 JavaScript 的内部沙盒 iframe (<em>frame2</em>)。我希望 <em>frame1</em> 仍然能够操纵 <em>frame2</em>。</p> <p>我知道通过设置 <em>frame1</em> 的 <pre><code>sandbox="allow-same-origin"</code></pre>，我可以从中访问 <em>frame2</em>，但它也可以访问其父级。</p> <p>尝试了不同 <pre><code>sandbox</code></pre> 值之间的多种组合以及设置 <pre><code><iframe></code></pre> 元素源的方法，我遇到了两个主要错误消息：</p> <ol> <li>“不允许加载本地资源：blob:....”</li> <li>“未捕获的 DOMException：无法从“窗口”读取命名属性“文档”：阻止来源为“null”的框架访问跨源框架”</li> </ol> <p>这是我用来测试各种可能性的代码片段：</p> <pre><code>var inner = [0,0,0,0] var outer = [0,0,0] var focus = null document.body.innerHTML = [ [0,0],[0,1],[0,2], [1,0],[1,1],[1,2], [2,0],[2,1],[2,2], [3,0],[3,1],[3,2], ].map(([i,o]) => `<button>${i}-${o}</button>`).join('') const container = document.createElement('div') const buttons = [...document.body.children] document.body.append(container) buttons.map(btn => { btn.onclick = reload }) function reload () { if (focus) focus.style = '' const btn = focus = this btn.style = 'background-color: pink;' const text = btn.textContent const [I,O] = text.split('-').map(Number) inner = inner.map((x, i) => i === I) outer = outer.map((x, o) => o === O) container.replaceChildren() spawn(container) } // ----------------------------------------------- async function spawn (element) { const program = 'test' const htmlsrc = `<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body>333</body></html>` const blobsrc = new Blob([htmlsrc], { type: "text/html" }) const hrefsrc = URL.createObjectURL(blobsrc) const datauri = `data:text/html;charset=utf-8,${htmlsrc}` const src_js = ` const iframe = document.createElement('iframe') iframe.setAttribute('sandbox', 'allow-same-origin') const html = \`<!DOCTYPE html> <html><head><meta charset="utf-8"></head><body>333</body></html>\` const blob = new Blob([html], { type: "text/html" }) const href = URL.createObjectURL(blob) const href2 = "${hrefsrc}" const href3 = \`${datauri}\` console.log({ href: href }) console.log({ href2: href2 }) console.log({ href3: href3 }) console.log({ lhref: location.href }) // not allowed to load resource if (${inner[0]}) iframe.setAttribute('src', href2) // no cross origin access: if (${inner[1]}) iframe.setAttribute('src', href) if (${inner[2]}) iframe.setAttribute('srcdoc', html) if (${inner[3]}) iframe.setAttribute('src', href3) iframe.onload = () => { console.log("readonly iframe loaded") const innerDoc = iframe.contentWindow.document console.log(innerDoc.body.innerHTML) } document.body.appendChild(iframe) ` const string = src_js const sandbox = 'allow-scripts' const html = index_html(wrap(string, program)) const src = _2href(_2blob(html), `#${program}`) const srcuri = `data:text/html;base64,${btoa(html)}` if (outer[0]) { const { global, data, port } = await iframer(element, { srcdoc:html, sandbox }) } if (outer[1]) { const { global, data, port } = await iframer(element, { src: srcuri, sandbox }) } if (outer[2]) { const { global, data, port } = await iframer(element, { src, sandbox }) } } // ---------------------------------------------------------------------- function _2blob (html) { return new Blob([html], { type: "text/html" }) } function _2href (blob, query = '') { return URL.createObjectURL(blob) + query } function index_html (source) { return `<!DOCTYPE html> <html> <head><meta charset="utf-8"></head> <body>${source}</body> </html>` } function wrap (source_js, program) { const filepath = `${program || '(anonymous)'}.js` const bootloader_js = `;(async element => { // document.currentScript.remove() const source = element.textContent element.remove() console.log('load: ' + '${program}') eval(source) //# sourceURL=(iojs:bootloader) //# ignoreList=(iojs:bootloader) })(document.querySelector('[type="text"]'))` source_js = `;(async () => { console.log('run: ' + "${filepath}");${source_js} //# sourceURL=${filepath} //# ignoreList=${filepath} })()` return ` <script type="text">${source_js}</`+`script> <script>${bootloader_js}</`+`script> ` } // ---------------------------------------------------------------------- function iframer (element, { src, srcdoc, sandbox = '', timeout } = {}) { const el = document.createElement('div') const sh = el.attachShadow({ mode: 'closed' }) sh.innerHTML = `<iframe sandbox="${sandbox}"></iframe>` const [iframe] = sh.children const { promise, resolve, reject } = Promise.withResolvers() iframe.onload = onload window.addEventListener('message', onmessage) const id = timeout !== undefined ? setTimeout(ontimeout, timeout) : null if (src) iframe.src = src else if (srcdoc) iframe.srcdoc = srcdoc element.append(el) return promise function ontimeout () { window.removeEventListener('message', onmessage) iframe.onload = undefined reject(new Error('iframe timeout')) } function onload () { clearTimeout(id) iframe.onload = undefined window.removeEventListener('message', onmessage) resolve({ global: iframe.contentWindow, data: null, port: null }) } function onmessage (event) { const { source, data = null, ports: [port = null] } = event if (source === iframe.contentWindow) { clearTimeout(id) iframe.onload = undefined window.removeEventListener('message', onmessage) const sorigin = sandbox.includes('allow-same-origin') resolve({ global: sorigin ? iframe.contentWindow : null, data, port }) } } } </code></pre> <p>到目前为止我尝试过的所有内容都可以在<a href="https://codepen.io/serapath/pen/qBGbpMG?editors=0010" rel="nofollow noreferrer">this codepen</a></p>中找到 </question> <answer tick="false" vote="0"> <p>为了简单起见，我将顶部文档称为 <em>top</em>，第一帧为 <em>frame1</em>，内部文档为 <em>frame2</em>。</p> <p>我不是 100% 确定到底发生了什么，但仅从外观来看，我想说就好像 <pre>frame1</pre> 上的 <em><code>sandbox</code></em> 属性将使其拥有自己的起源，但是它的子资源将加载仍将匹配最顶部可导航的原点。所以 <em>frame2</em> 和 <em>top</em> 是同源的，但是 <em>frame1</em> 有自己的不透明原点。无论您如何加载 <em>frame2</em>，这都会成立。</p> <p>我现在能想到的唯一破解方法是使用 <pre><code>data:</code></pre> URL<sup>1</sup> 来加载 <em>frame1</em>，并且其 <pre><code>sandbox</code></pre> 上没有 <pre><code><iframe></code></pre> 属性。 <em>frame1</em>中的脚本仍然无法访问<em>top</em>，因为<pre><code>data:</code></pre> URL也是不透明的URL。然而 <pre><code>srcdoc</code></pre> 的原点将基于其不透明原点，而不是基于 <em>top</em> 的原点，因此我们可以从 <em>frame1</em> 中加载 <em>frame2</em> 到 <pre><code>srcdoc</code></pre> 中，并使用 <pre><code>sandbox="allow-same-origin"</code></pre> 以便 <em>frame1 </em>可以访问<em>frame2</em>，但<em>frame1</em>无法访问<em>top</em>，<em>frame2</em>无法执行脚本。</p> <p>但这意味着您需要获取 <em>frame1</em> 的内容，以便您可以创建它的 <pre><code>data:</code></pre> URL 版本，以及 <em>frame2</em> 的内容，以便您可以将其设置为 <pre><code>srcdoc</code></pre>。这样做时，请记住 <em>frame1</em> 现在处于不透明源，因此为了能够在服务器上获取资源，您需要传递 <pre><code>Access-Control-Allow-Origin: *</code></pre> 标头，这可能是您不想要的。因此，您可能必须从<em>top</em>获取这两个文档。</p> <p>这会给，</p> <p><em>frame1.html</em></p> <pre><code><h1>I am frame 1</h1> <!-- Below src will be replaced by the top window --> <iframe src="frame2.html" sandbox="allow-same-origin"></iframe> <script> const frame = document.querySelector("iframe"); onload = e => frame.contentDocument.body.append("frame 1 can access frame 2"); parent.document.body.append("Oops frame 1 can access parent"); // cross-origin, won't happen </script> </code></pre> <p><em>frame2.html</em></p> <pre><code><h1>I am frame 2</h1> <script> // Shouldn't happen alert("OoPs, running script"); </script> </code></pre> <p><em>top.html</em></p> <pre><code><iframe height=300></iframe> <script type=module> const frame1Content = await fetch("./frame1.html").then(resp => resp.text()); const frame2Content = await fetch("./frame2.html").then(resp => resp.text()); const frame = document.querySelector("iframe"); // We can't have `"` in the content since we use it for the attribute const cleanFrame2Content = frame2Content.replace(/"/g, "\\\""); // Replace the src attribute by the actual content of frame2.html const cleanFrame1Content = frame1Content.replace(`src="frame2.html"`, `srcdoc="${cleanFrame2Content}"`); frame.src = `data:text/html,${encodeURIComponent(cleanFrame1Content)}` </script> </code></pre> <p><a href="https://jsfiddle.net/myk8gobc/" rel="nofollow noreferrer">作为 JSFiddle</a>，因为 StackSnippet 的 <em>null</em> 起源的 iframe 将完全阻止任何子框架访问其他框架。</p> <p><sup>1。使用另一个域也可以实现相同的效果，这基本上就是 JSFiddle 等服务保护其主文档但仍允许用户嵌入同源 iframe 的方式。</sup></p> </answer> </body></html>
如何访问iframe内嵌套iframe的iframe.contentWindow.document？
我一整天都在尝试嵌套创建的 iframe 并访问其内容，但安全限制不允许我这样做。有办法吗？我在 codepen 中分享了我的代码以及迄今为止我尝试过的所有内容。 https://