javascript - onclick 按钮需要在父窗口中打开

标签 javascript jquery html iframe

我们的营销自动化(第 3 方)软件上有一个表单,正在 iframe 中的微型网站上调用该表单...但是,它当前正在打开 iframe 中的链接,而不是父窗口...我认为我知道如何修复它,但在将其传递给营销公司之前,我想与你们再次确认 onclick 代码是否有效。

我使用以下代码:

<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);">
    <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" target="_parent" onclick="try{CaptureFormData(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>

这是我想要触发在父窗口中打开成功结果的代码行:

<td><input id="CaptureControlButton_6_" type="button" value="Send" target="_parent" onclick="try{CaptureFormData(0);}catch(e){}" style="width: 300px;"><br>

我添加了 Target="_parent" 但这无法在父窗口中打开......这让我想到这一点:

onclick="try{CaptureFormData(0);}catch(e){}"

需要包含如下内容:

onclick="parent.window.open(try{CaptureFormData(0);}catch(e){})" 

这能解决我的问题吗?

只是添加 - 表单的脚本在这里:

<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() {try{errorMessage.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>

最佳答案

位置的实际更改发生在 JavaScript 内部,几乎在最后:

window.location.href=submitRedirectUrl;

要在最上面的框架(即信封页面)中执行此操作,请将其更改为

window.top.location.href = submitRedirectUrl;

请注意,只有父页面和 iframe 内的页面来自同一域时,这才有效,因为 same-origin-policy

关于javascript - onclick 按钮需要在父窗口中打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33077214/

相关文章:

javascript - 在javascript中动态创建表未正确显示列

html - Margin-top 无法正常工作

javascript - 返回的 python 值在插入 javascript 数组后会破坏 html 表

javascript - 如果鼠标悬停在 X 上,jQuery/Javascript 图片库会更改图片,但如果小于 X,则不会

Javascript/JQuery 对象数组按属性交集

javascript - 在鼠标滚轮滚动时更改选择输入中的所选元素

jquery - 如何在 Jquery jtable 的 master <tr> 之间添加空格

javascript - Leaflet Control 没有提供准确的侧边栏

javascript - 自动化基于 HTML5/AngularJS 的 UI,其中没有在元素上添加 id

c# - 从 jquery Ajax 调用 WCF 服务