测试页： https ：//jsfiddle.net/y25rk55w/
在此测试页上，您可以看到3<iframe>相互嵌入。每个标签中都<iframe>包含一个标签。<script><head>
问题是：只有<script>在第一个<iframe>会被浏览器加载。其他两个<script>标签将出现在dom中，但浏览器甚至不会尝试加载它们。该问题不是特定于浏览器的，可以在chrome，firefox中还原。无法通过添加超时或在追加脚本之前等待来解决此问题。所有iframe都必须以编程方式生成内容，这一点似乎很重要；如果您用具有实际src链接的iframe替换该iframe，问题将消失。
问题是：实际上如何将脚本加载到iframe 2和3中？
完整的测试代码：
// It doesn't matter if the scripts exist or not
// Browser won't try to load them either way
var scripts = [
'//testdomain.test/script1.js',
'//testdomain.test/script2.js',
'//testdomain.test/script3.js'
];
function createIFrame(win, onCreated) {
var iframe = win.document.createElement('iframe');
iframe.onload = function () {
onCreated(iframe);
};
win.document.body.appendChild(iframe);
}
function loadScript(win, url) {
var script = win.document.createElement('script');
script.src = url;
script.onload = function() {
console.log("Script " + url + " is loaded.");
};
win.document.getElementsByTagName('head')[0].appendChild(script);
}
createIFrame(window, function(iframe1) {
loadScript(iframe1.contentWindow, scripts[0]);
createIFrame(iframe1.contentWindow, function (iframe2) {
loadScript(iframe2.contentWindow, scripts[1]);
createIFrame(iframe2.contentWindow, function (iframe3) {
loadScript(iframe3.contentWindow, scripts[2]);
});
});
});
在问题中，您可以看到我正在忽略该协议：
/* This is valid to omit the http:/https: protocol.
In that case, browser should automatically append
protocol used by the parent page */
var scripts = [
'//testdomain.test/script1.js',
'//testdomain.test/script2.js',
'//testdomain.test/script3.js'
];
问题是，以编程方式创建的iframe具有协议about:（或javascript:，取决于您如何创建它们）。我仍然无法解释为什么第一个脚本正在加载，或者为什么其他两个脚本根本没有显示在“网络”选项卡中，但是我想这不是很重要。
解决方案：https://使用类似以下代码的方式显式使用或以编程方式附加协议：
function appendSchema(win, url) {
if (url.startsWith('//')) {
var protocol = 'https:';
try {
var wPrev = undefined;
var wCur = win;
while (wPrev != wCur) {
console.log(wCur.location.protocol);
if (wCur.location.protocol.startsWith("http")) {
protocol = wCur.location.protocol;
break;
}
wPrev = wCur;
wCur = wCur.parent;
}
} catch (e) {
/* We cannot get protocol of a cross-site iframe.
* So in case we are inside cross-site iframe, and
* there are no http/https iframes before it,
* we will just use https: */
}
return protocol + url;
}
return url;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句