如何使用 Javascript 动态加载 iFrame 源和自动填充输入表单答案

【问题标题】：How to dynamically load an iFrame source and autofill input forms with Javascript如何使用 Javascript 动态加载 iFrame 源和自动填充输入表单
【发布时间】：2013-10-15 22:32:53
【问题描述】：

我需要检索 URL 参数（我可以成功）并根据一个参数决定要填充哪个 iframe src，然后使用其他参数自动填充通过表单 src 创建的表单。第一个问题是我无法阻止页面进入无限循环。它正确加载并显示正确的 iframe，但无限循环（加载）需要停止。其次，我无法获取其他参数来自动填充输入值。

这里是代码。我希望你能帮忙。这是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-    xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Keep your jQuery up to date -->

<script  type="text/javascript">
var urlParams;
(window.onpopstate = function () {
var match,
    pl     = /\+/g,  // Regex for replacing addition symbol with a space
    search = /([^&=]+)=?([^&]*)/g,
    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
    query  = window.location.search.substring(1);

urlParams = {};
while (match = search.exec(query))
   urlParams[decode(match[1])] = decode(match[2]);
})();


var test = urlParams["entry"];
var test2 = urlParams["test"];

function iframedirect(){
if (test=="sldk") {
    document.getElementById("frame1").src = "http://na-sj09.marketo.com/lp/cochlearsandbox/UpgradeInterest_IFrameLandingPage.html";
    var f1 = frames['frame1'].document.forms['mktForm_1108'];
    f1.elements['FirstName'].value = test;
}else{
document.getElementById("frame1").src = "http://na-sj09.marketo.com/lp/cochlearsandbox/CAM-UpgradeInterestForm_iFrameLandingPage2ndOption.html";
}
}

</script>
</head>
<body id="bodyId" class="mktEditable" align="center" >
<iframe id="frame1" src="" onload="iframedirect()" height="750px" width="620px"  scrolling="no"    frameborder="0" marginwidth="0"></iframe>
</body>
</html>

【问题讨论】：

标签： javascript iframe dynamic onload autofill

【解决方案1】：

死循环很可能是函数iframedirect()的结果造成的。它改变了iframe的src，一次次触发onload事件。

您可以使用变量来指出 iframe 是否已由 iframedirect() 加载。

var test = urlParams["entry"];
var test2 = urlParams["test"]; 
var isLoadedByIFrameDirect = false;
function iframedirect() {
   if(!isLoadedByIFrameDirect) {
       if (test=="sldk") {
          document.getElementById("frame1").src = "url1";
          var f1 = frames['frame1'].document.forms['mktForm_1108'];
          f1.elements['FirstName'].value = test;
       }else{
          document.getElementById("frame1").src = "url2";
       }
       isLoadedByIFrameDirect = true;
   }

}

【讨论】：

实现这个并没有停止无限循环。谢谢你的主意。你意识到我有一个自引用的onload是对的。我需要删除它，而不是试图阻止它。感谢您将您的建议放在可以轻松复制和粘贴的代码中。所以很少有人这样做。新手真的可以从中受益。我确实解决了这个问题，我现在将其发布。

【解决方案2】：

好的，问题是我创建了一个自引用 onload 事件。馊主意。为了解决这个问题，我需要从 iframe 元素中删除 onload。我之前试过把它放在身体里，但没有运气。但我可能把它搞砸了，所以如果你有类似的情况，不要忽略这个选项。我决定在函数之后立即使用 Javascript 来完成。如果你是新手，可以在这里找到 Javascript onload 和 HTML onload 的区别

W3Schools onload Event

我仍然没有解决这个问题的“从 url 参数自动填充 iframe 表单”部分。一旦我弄清楚了，我将对这个答案发表额外的评论。

无论如何，这里是代码

function iframedirect() {
   if(!isLoadedByIFrameDirect) {
       if (test=="sldk") {
          document.getElementById("frame1").src = "http://na-   sj09.marketo.com/lp/cochlearsandbox/UpgradeInterest_IFrameLandingPage.html";
          var f1 = frames['frame1'].document.forms['mktForm_1108'];
          f1.elements['FirstName'].value = test;
       }else{
          document.getElementById("frame1").src = "http://na-sj09.marketo.com/lp/cochlearsandbox/CAM-UpgradeInterestForm_iFrameLandingPage2ndOption.html";
       }
       isLoadedByIFrameDirect = true;
   }
}
window.onload = iframedirect;

【讨论】：