JavaScript更改iframe src会导致http请求冲突，并且iframe无法重新加载
我刚接触web dev，已经对我的问题做了很多研究，但我仍然觉得卡住了：
我想要实现的是:通过URL参数将数据传递给iframe src，以便在iframe文档中使用。父页面和iframe位于不同的域中。
设置:我可以有一个或多个带有src=“www.example.com”的iframe。在DOM完全加载之后，我尝试更改iframe src，以便附加一些查询参数。我使用纯JS来获取初始的iframe src >将其与查询参数连接起来>将新的URL保存在变量中>将iframe src更改为变量中的URL。
问题:有时iframe src没有改变-似乎与互联网连接有关。每几次刷新javascript都不会成功更改src，但不会抛出任何错误。
我的故障排除:如果我检查页面并转到Network (Chrome)，我可以看到iframe有两个HTTP请求:第一个是初始的src，第二个是新的src (即使JS dones没有成功地更改它)。
从这里开始，我遇到了3种情况：
- 第一个http请求被取消，第二个http请求完成-一切正常-源被更改并传递数据。
- 两个http请求都保持‘pending’状态-源被更改并数据被传递。
- 第一个http请求在第二个http请求启动之前完成。第二个保持在‘pending’状态--这就是问题所在-- src不会改变，即使JS似乎已经正确执行，它仍然保持旧的状态。
我知道当iframe的src改变时，它应该会导致iframe重新加载，从而触发第二个http请求。但是，当场景3发生时，iframe不会重新加载。这就像一个http请求‘冲突’(不确定这是否是正确的表达方式)。
为什么更改src不能正确一致地重新加载iframe？
我感谢任何建议，最佳实践或可能的替代方案，使这项工作。
这是我的代码。我已经添加了注释来描述我打算做的事情：
paramToPass = ['parma1', 'param2', 'param3']
if (paramToPass) {
var myIframe = 'myIframeClass'; // define what iframes to find
var iframes = document.getElementsByClassName(myIframe); // get all iframes from the page with desired class
var paramStr = paramToPass.join('&'); // create the query parameter string
var iframesElm;
for (iframesElm = 0; iframesElm < iframes.length; iframesElm++) {
var initialSrc = iframes[iframesElm].getAttribute('src'); // find the initial src of the iframe
if(initialSrc.indexOf("?") > -1) { // if initialSrc already contains parameters
var newSrc = initialSrc + '&' + paramStr; // concatonate initial src with parameters
iframes[iframesElm].src = newSrc; // change the iframe src
// iframes[iframesElm].setAttribute('src', newSrc); // alternative to change iframe src
} else { // if initialSrc doesn't contain parameters
var newSrc = initialSrc + '?' + paramStr; // concatonate initial src with parameters
iframes[iframesElm].src = newSrc; // change iframe src
// iframes[iframesElm].setAttribute('src', newSrc); // alternative to change iframe src
};
};
};谢谢!
编辑：
新的、有效的代码。为了更广泛的浏览器兼容性，我为Array.from()和forEach()添加了polyfill
paramToPass = ['parma1', 'param2', 'param3']
if (paramToPass.length > 0) {
var iframes = document.getElementsByClassName(myIframe);
var paramToPassStr = paramToPass.join('&');
Array.from(iframes).forEach(function(iframe) {
iframe.onload = function() { // execute after the iframe is loaded. Prevents http request conflict
var initialSrc = iframe.src;
var sep = initialSrc.indexOf("?") > -1 ? "&" : "?"; // choose separator based on whether or not params already exist in the initialSrc
var newSrc = initialSrc + sep + paramToPassStr;
iframe.src = newSrc;
console.log('iframe reload');
iframe.onload = null; // stops the infinite reload loop
};
});
} else { // paramToPass array is empty, throw error
console.log('no paramToPassStr to pass found')
};回答 1
Stack Overflow用户
发布于 2018-06-23 04:58:02
您可能应该将重新加载iframe的代码放入其onload处理程序中，这样它就会在第一次成功加载iframe之后运行。那就不会有任何冲突了。
Array.from(iframes).forEach(iframe => iframe.onload = () => {
var initialSrc = this.src;
var sep = initialSrc.indexOf("?") > -1 ? "&" : "?";
var newSrc = initialSrc + sep + paramStr;
this.src = newSrc;
this.onload = null;
});https://stackoverflow.com/questions/50994669
复制相似问题