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

How to dynamically load an iFrame source and autofill input forms with Javascript

本文关键字：填充 输入 表单 源代码 Javascript 何使用 动态 加载 iFrame      更新时间：2023-09-26

我需要检索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>

无限循环可能是由函数 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;
   }

}

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

。

W3学校上线活动

我仍然没有解决这个问题的"从 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;
相关文章：