使用 JavaScript 在父窗口中打开 iFrame 表单成功

Posted 2023-05-09

【中文标题】使用 JavaScript 在父窗口中打开 iFrame 表单成功

【英文标题】：Using JavaScript to Open iFrame form success in parent window

【发布时间】：2016-01-09 20:33:12

【问题描述】：

我们目前正在使用 javascript 来处理我们的表单，但表单包含在 iFrame 中，它会在 iFrame 中打开成功结果 URL。我们希望成功结果（填写表格后）指向父框架...

表单脚本：

<script>try

var lastSubmission = null;
var ContactId = 0; var _wow;
var CaptureId = 12;
var PageId = 0;
var EmailId = 0;
var CampaignName = '';
var IsNewContact = false;
var IsTest = false;
var IsUserValid;
var gatorLeadsTrackingOptions = 0;
catch(e)
errorMessage.innerhtml ='';
successMessage.innerHTML ='';
function GatorTrim(x)  return x.replace(/^\s+|\s+$/gm,'');;function CaptureFormData()

if(lastSubmission != null)
 secondsSinceLastSubmission = (new Date().getTime() - lastSubmission) / 1000
 if(secondsSinceLastSubmission < 1) 
     return;
 

var Value;
var CheckSelection = false;
var result;
var ButtonId = 6;
var submissionData = 
 captureId: CaptureId,
 buttonId: ButtonId,
 pageId: PageId,
 emailId: EmailId,
 campaignName: CampaignName,
 contactId: ContactId,
 isTest: IsTest,
 sendNotificationEmail: false,
 passGatorLeadsTrackingDataInRedirectUrl: true,
 onlyOneEntry: false,
 displayName: 'Volo Not got a code',
 emailAddress: '',
 values: [],
 gatorLeadsTrackingOptions: gatorLeadsTrackingOptions
;
document.getElementById('CaptureControlButton_6_').disabled = true;
document.getElementById('CaptureControlButton_6_').value = 'Submitting, please wait';
setTimeout(function() tryerrorMessage.innerHTML = '';
successMessage.innerHTML = '';
Value = getObject('CaptureControl_4_').value;
if(Value=='')errorMessage.innerHTML += 'The email address field is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';

Value = getObject('CaptureControl_5_').value;
if(Value=='')errorMessage.innerHTML += 'Mandatory fields missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';

Value = getObject('CaptureControl_3_').value;
if(Value=='')errorMessage.innerHTML += 'The field name company name is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';

if(errorMessage.innerHTML != '')return;
Value = GatorTrim(getObject('CaptureControl_4_').value);
submissionData.emailAddress = Value;


Value = GatorTrim(getObject('CaptureControl_5_').value);
if (Value != undefined) submissionData.values.push(controlId: 5, value: Value );



Value = GatorTrim(getObject('CaptureControl_6_').value);
if (Value != undefined) submissionData.values.push(controlId: 6, value: Value );



Value = GatorTrim(getObject('CaptureControl_3_').value);
if (Value != undefined) submissionData.values.push(controlId: 3, value: Value );



var result = WebCapture.Submit(JSON.stringify(submissionData));
var response = JSON.parse(result.value);
if(response.success==false)errorMessage.innerHTML = 'You have already submitted.';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
return;
trackingData = response.trackingData;
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
successMessage.innerHTML = 'Thank you for submitting&nbsp;';
if(typeof _wow != 'undefined' && response.trackWowSubmit)
 trackUrlInWow(response.wowUrl);
var submitRedirectUrl = 'http://takeflight.volocommerce.com/multichannel-selling/'
if(submitRedirectUrl.indexOf('?') == -1)
 submitRedirectUrl = submitRedirectUrl + '?';
else
 submitRedirectUrl = submitRedirectUrl + '&';


submitRedirectUrl += 'gator_td=' + trackingData;
window.location.href=submitRedirectUrl;
catch(e)if(IsTest)  alert(e.message);  else  alert('An error has occurred submitting the data. Please try again.');  
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';

lastSubmission = new Date().getTime();
, 100);

</script>

表单（包含在我们页面上的 iframe 中）

<style>
body 
background: #fff;
color:#000;
font-family: ‘open sans’, sans-serif;

input[type=text], input[type=button] 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
height: 40px;
border: 1px solid #f1f1f1;

input[type=button] 
background-color: #F04D1D;
height: 45px;
font-weight: bold;
color: #FFF;
font-size: 16px;

</style>
<table style="width: 300px; background-color: rgb(255, 255, 255);"><base target="_parent" />
    <tbody>
        <tr>
            <td style="text-align: center;"><font color="#f04d1d"><strong><span style="font-family: '‘open sans’', sans-serif, ';'; font-size: 24px;">GET YOUR CODE&nbsp;</span></strong></font></td>
        </tr>
        <tr>
            <td><span style="color: rgb(242, 242, 242);">&nbsp;</span></td>
        </tr>
        <tr>
            <td><br>
            </td>
        </tr>
        <tr>
            <td>
            <table>
                <tbody>
                    <tr>
                        <td>First Name*&nbsp;</td>
                        <td><span style="color: rgb(0, 0, 0);">Last Name*</span></td>
                    </tr>
                    <tr>
                        <td><input name="First Name" id="CaptureControl_5_" type="text" value=""></td>
                        <td><input name="Last Name" id="CaptureControl_6_" type="text" value=""></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
        <tr>
            <td><br>
            </td>
        </tr>
        <tr>
            <td><span style="color: rgb(0, 0, 0);">&nbsp;</span><span style="color: rgb(0, 0, 0);">Company Name*</span></td>
        </tr>
        <tr>
            <td><input name="Company Name" id="CaptureControl_3_" type="text" value="" style="width: 300px;"></td>
        </tr>
        <tr>
            <td><br>
            </td>
        </tr>
        <tr>
            <td><span style="color: rgb(0, 0, 0);">&nbsp;</span><span style="color: rgb(0, 0, 0);">Your Email*</span></td>
        </tr>
        <tr>
            <td><input name="Email Address" id="CaptureControl_4_" type="text" value="" style="width: 300px;"><br>
            </td>
        </tr>
        <tr>
            <td><span style="color: rgb(242, 242, 242);">&nbsp;</span></td>
        </tr>
        <tr>
            <td><input id="CaptureControlButton_6_" type="button" value="Send" onclick="tryCaptureFormData(0);catch(e)" style="width: 300px;"><br>
            <div id="errorMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:red;">Error Message Area</div>
            <div id="successMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:#000000;">Success Message Area</div>
            </td>
        </tr>
        <tr>
            <td><span style="color: rgb(0, 0, 0); font-size: 10px;"><em>*Required field</em></span></td>
        </tr>
    </tbody>
</table>
<br>
<br>

注意 该表单位于与我们的主网站不同的 URL/域中，内容所在的位置。

【问题讨论】：

据我所知，您必须使用 javascript（来自父框架）来捕获提交操作（在子框架中），然后以某种方式在父框架中打开生成的页面.由于您的 iframe 来自另一个域，因此您必须为服务器设置跨域请求才能执行此操作。

【参考方案1】：

只需使用 window.top.location 即可更改整个页面，而不仅仅是 iframe 部分。