个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
此问题已出现在最新版本的 Chrome (74.0.3729.108) 中。这是本地文件系统所独有的，因为当应用程序位于服务器上时，我有其他方法可以在 iframe 中加载相邻文档。
在我的应用程序中，我们已经能够通过将 iframe 写入 DOM，使用 JavaScript 从文件系统加载文档，然后让 iframe 中的文档将其 innerHTML 写入 sessionStorage 。 iframe 完成加载后，我们使用 iframe 上的 onload 属性捕获它，并处理将项目写入 sessionStorage。
我已将其缩小到一些基本代码，发现这仅在第一次尝试时有效，然后在第一次失败后进行任何尝试。
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
HandleLoad = function () {
'use strict';
var data;
try {
data = window.sessionStorage['data'];
delete window.sessionStorage['data'];
} catch (ignore) {
// something went wrong
}
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data !== null && data !== undefined) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
}
function OnLoad() {
var url = urls[0];
if (url) {
urls.splice(0, 1);
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '" onload="HandleLoad();"></iframe>';
}
}
在文件系统中，我们将 HTML 写入 index.html，紧挨着它的是两个最小的 HTML 文件，Doc1.html 和 Doc2 .html。除了 body 的 div 中的标识语句外，它们的内容都是相同的:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
try {
window.sessionStorage['data'] = window.document.body.innerHTML;
} catch {
// no luck
}
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
运行时，我们应该看到两个相邻文档的内容 HTML 写入了 index.html 中的 result div。
当我运行这个最小示例时，我可以看到内容已成功写入 sessionStorage，然后写入第一个文档的 DOM，但下一次尝试失败。我该怎么做才能让它始终如一地工作，以及它失败的原因是什么？
最佳答案
我不确定是什么导致了奇怪的行为，所以希望其他人可以提供一些关于这里到底发生了什么的见解。
与此同时，这是使用 window.postMessage 的替代解决方案:
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
<div id="result"></div>
</body>
</html>
var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html',
'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];
window.addEventListener('message', event => {
'use strict';
var data = event.data;
var container = document.getElementById('container');
window.document.body.removeChild(container);
if (data) {
var resultContainer = document.getElementById('result');
resultContainer.innerHTML += data;
}
if (urls.length > 0) {
OnLoad();
}
})
function OnLoad() {
var url = urls.shift();
if (url) {
var container = document.createElement('div');
container.id = 'container';
container.style.visibility = 'hidden';
window.document.body.appendChild(container);
container.innerHTML = '<iframe src="' + url + '"></iframe>';
}
}
<!DOCTYPE html>
<html>
<head>
<title>Chrome iFrame Tester</title>
<script>
function OnLoad() {
window.parent.postMessage(window.document.body.innerHTML, '*');
}
</script>
</head>
<body onload="OnLoad()">
<div>This is Doc 1's content!</div>
</body>
</html>
关于javascript - 为什么我可以在第一次尝试时从 iframe 写入 sessionStorage，但不能连续尝试？ (Chrome 版本 74)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55909591/
24
4
0
所以我知道，如果我将 iFrame 包含到不在同一域中的页面，我将无法通过浏览器策略访问该 iframe 的 DOM，但是 iframe 中的页面可以执行任何类型的父文档访问吗？ 具体来说，我必须考虑
我有 3 个嵌套的 iframe，我想访问第三个 iframe 中的元素(链接)。 var iframe = document.getElementById('aswift_2'); var inne
Chrome 有最简单的方法，只需从下拉列表中选择一个框架即可。 Firefox 提供了 cd(frame)功能不太好用，但只要您愿意发现哪个框架是哪个框架就可以完成工作。 但是我们如何在 Inter
我们公司正在考虑允许第三方网站使用我们的在线结账系统。 一位客户表示，他们希望能够使用灯箱样式的弹出窗口来显示结帐。他们希望在网站的每个页面上都可以使用它，因此大多是不安全的页面。我们的结帐系统和客户
当 iframe 中加载的页面来自另一个域时，我们如何从 iframe 中加载的文档访问父文档？ 我收到权限被拒绝错误。 最佳答案 如果您可以控制这两个文档，那么您可以轻松地使用 easyXDM (
使用 SOAP 调用我得到一个 URL 并在 iframe 中显示。那个 URL 内容是一个表单，用户需要填写所有数据并提交它。当我调用 SOAP 函数时，也给出了一个返回链接，其中一个重定向到我的站
我正在尝试开发一个小型 Web 应用程序，其中包含一个使用来自另一个域的 iframe 的 Web 应用程序。我正在尝试在本地计算机上对此进行测试，为此我需要模仿 iframe 来自另一个域(虽然它实
我有一个网页 指向另一个网站。我不希望这阻止页面其余部分的加载。有没有办法异步加载它？ 最佳答案 使用 jQuery，可以实现以下效果: $(window).load(function() {
我搜索过高低，无法找到解决方案。在我看来，iframe API仅适用于较旧样式的网址，而不适用于较新的海关网址。 我的意思是，如果某人的YouTube网址为www.youtube.com/user/T
我想在我的网站上显示youtube视频。 iframe是可能的，我只需要像这样将其放在我的网页上。 一切都很好，除了我超过99％的客户来自伊朗，而且YouTube在伊朗被政府封锁。因此，直接从you
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
所以我有一个简单的页面，当用户单击链接时，iframe 将打开。我正在尝试使用 http://www.google.com/support/analytics/bin/answer.py?hl=en&
假设情况:我有一个名为“miniatureBoltsInCarburetors.com”的不起眼的小网站，该网站提供有关将化油器固定在一起的微型 bolt 的内容以及一些一般相关的汽车信息。我的网站还
IE 6.0 向我显示消息“此页面包含安全和非安全项目”，因为我的页面上有 iframe(针对组合框错误)。我尝试指向 src 中的一些不同的内容，但如果不放入空白的 html 页面，我似乎无法摆脱此
我有一个带有一个 iframe 和一个按钮的网页。 在页面加载事件中， if (!Page.IsPostBack) { string sDocUrl = //some doucmen url Ifra
我有一个带有一些 IFrame 的页面。这些 IFrame 位于同一域中。我想在打开模态窗口时从页面中删除 iframe 内容，以减少模态窗口中的延迟。 然后，当我关闭模态窗口时，我希望将 IFram
我正在尝试访问一个框架内的控件，该框架位于另一个框架内的框架内。 最后(最深的)框架仅用于登录 - 我设法做到了。 问题是登录后我基本上需要回到上框点击一个按钮。出于某种原因，我不断收到错误消息: N
我有下一个元素结构: .. actual markup with scripts here 使用纯 javascript，我已经摆脱
我们使用 Worldpay 作为我们的支付提供商，我们将 PayPal 作为 worldpay 的一部分实现，这意味着我们只与 Worldpay 集成，他们处理 PayPal 集成。 虽然这会带来很多
我有一个客户，由于特定原因，需要在 HTTP 页面上放置一个指向 HTTPS 页面的 IFRAME。 HTTP 页面托管在与 HTTPS 页面不同的域和服务器上，但都属于同一客户端。 撇开为什么不应该
我是一名优秀的程序员,十分优秀！