可以 jQuery invalidHandler 通过父窗口中的 iframe 滚动顶部
Can jQuery invalidHandler ScrollTop Via Iframe in Parent Window
我有一个通过父窗口中的 iframe 显示的 php 表单，php 表单 scrollTop 本身就可以了，但是一旦进入父窗口页面的 iframe，它就会直接跳转到错误。有没有办法添加到下面的代码中，使其在父窗口的 iframe 中滚动顶部？
$(function () {
$("#frmFormMail").validate({
invalidHandler : function() {
$('html, body').animate({
scrollTop: $("#frmFormMail").offset().top // scroll top to your form on error
}, 'slow' );
},
// Specify the validation rules
rules: {
field_0: { // Title
required: true,
minlength: 3
},
field_1: { // Full Name
required: true,
email: true,
minlength: 5
},
field_2: { // Address
required: true,
minlength: 20
},
field_3: { // Age
required: true,
minlength: 2
},
field_4: { // Marital Status
required: true,
minlength: 3
},
field_5: { // Children
required: true,
minlength: 1
},
field_6: { // Nationality
required: true,
minlength: 3
},
field_7: { // Health
required: true,
minlength: 10
},
field_8: { // Glasses
required: true,
minlength: 3
},
field_9: { // Car Licence
required: true,
minlength: 10
},
field_10: { // Nationality
required: true,
minlength: 3
},
field_11: { // Website of interest 1
required: false,
minlength: 5
},
field_12: { // Website of interest 2
required: false,
minlength: 5
},
field_13: { // Applying for Position
required: true,
minlength: 3
},
field_14: { // Resume
required: true,
//Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt"
},
field_15: { // Cv
required: true,
//Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt"
},
field_16: { // Present Job
required: true,
minlength: 10
},
field_17: { // When can You Start
required: true,
minlength: 3
},
field_18: { // Relocate Dropdown
required: true // required: false not a required field, required: true required field
},
field_19: { // Last 3 Jobs
required: true,
minlength: 30
},
field_20: { // Attach Reference
required: false,
//Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt"
},
field_21: { // Attach Other of interest
required: false,
//Put the allowed file types accept here if required - add remove more extention type as required. accept: "jpg|jpe|jpeg|png|mp3|wav|aac|rtf|odt|doc|docx|pdf|txt"
},
field_22: { // Suitable for this job
required: true,
minlength: 100
},
field_23: { // Suitable for this job
required: true,
minlength: 100
},
field_24: { // Comments questions
required: false,
minlength: 50
},
},
// Specify the validation error messages
messages: {
field_14: {
required: "This field is required - will validate on submit"
},
field_15: {
required: "This field is required - will validate on submit"
},
},
submitHandler: function(form) {
form.submit();
}
});
});
<div align="left" style="margin-top:5px; margin-left:10px; width:690px;">
<fieldset style="border:#CCCCCC 1px solid;"><legend><label class="label" style="background-color:#989EEF;">Job Application Form</label></legend>
<form name="frmFormMail" id="frmFormMail" target="submitToFrame" action='<?php echo PHPFMG_ADMIN_URL . '' ; ?>' method='post' enctype='multipart/form-data' onsubmit='return fmgHandler.onSubmit(this);'>
<input type='hidden' name='formmail_submit' value='Y'>
<input type='hidden' name='mod' value='ajax'>
<input type='hidden' name='func' value='submit'>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_1_div'>
<label class='title'>Title and Full Name <span style="color:red;">*</span></label>
<input type="text" name="field_0" id="field_0" value="<?php phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="80" placeholder="Full Name" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_1_div'>
<label class='title'>Email <span style="color:red;">*</span></label>
<input type="text" name="field_1" id="field_1" value="<?php phpfmg_hsc("field_1", ""); ?>" class='inputbox' maxlength="60" placeholder="Email" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_2_div'>
<label class='title'>Address <span style="color:red;">*</span></label>
<input type="text" name="field_2" id="field_2" value="<?php phpfmg_hsc("field_2", ""); ?>" class='inputbox' maxlength="250" placeholder="Address" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_3_div'>
<label class='title'>Age <span style="color:red;">*</span></label>
<input type="text" name="field_3" id="field_3" value="<?php phpfmg_hsc("field_3", ""); ?>" class='inputbox' maxlength="20" placeholder="Age" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_4_div'>
<label class='title'>Marital Status <span style="color:red;">*</span></label>
<input type="text" name="field_4" id="field_4" value="<?php phpfmg_hsc("field_4", ""); ?>" class='inputbox' maxlength="50" placeholder="Marital Status" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_5_div'>
<label class='title'>Dependants / Children <span style="color:red;">*</span></label>
<input type="text" name="field_5" id="field_5" value="<?php phpfmg_hsc("field_5", ""); ?>" class='inputbox' maxlength="100" placeholder="Number of Children / Dependants" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_6_div'>
<label class='title'>Nationality <span style="color:red;">*</span></label>
<input type="text" name="field_6" id="field_6" value="<?php phpfmg_hsc("field_6", ""); ?>" class='inputbox' maxlength="100" placeholder="Nationality" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_7_div'>
<label class='title'>General Health / Smoker / Non-Smoker <span style="color:red;">*</span></label>
<input type="text" name="field_7" id="field_7" value="<?php phpfmg_hsc("field_7", ""); ?>" class='inputbox' maxlength="250" placeholder="General Health / Smoker / Non-Smoker" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_8_div'>
<label class='title'>Do You Wear Glasses or Contact Lens <span style="color:red;">*</span></label>
<input type="text" name="field_8" id="field_8" value="<?php phpfmg_hsc("field_8", ""); ?>" class='inputbox' maxlength="100" placeholder="Glasses / Contact Lenses" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_9_div'>
<label class='title'>Car / Licence / Clean Driving Licence <span style="color:red;">*</span></label>
<input type="text" name="field_9" id="field_9" value="<?php phpfmg_hsc("field_9", ""); ?>" class='inputbox' maxlength="200" placeholder="Car / Licence / Clean" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class='field_block' id='field_10_div'>
<label class='title'>Anything else you think we should know</label>
<textarea name="field_10" id="field_10" class='textarea' maxlength="1000" data-limit="1000" placeholder="Please tell us of anything else that might be relevant about your self and about any special needs or disabilities you might have or need help with." style="width:627px; height:60px;"><?php phpfmg_hsc("field_10"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_11_div'>
<label class='title'>Website of interest 1 (Optional)</label>
<input type="text" name="field_11" id="field_11" value="<?php phpfmg_hsc("field_11", ""); ?>" class='inputbox' maxlength="250" placeholder="Website Address" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_12_div'>
<label class='title'>Website of interest 2 (Optional)</label>
<input type="text" name="field_12" id="field_12" value="<?php phpfmg_hsc("field_12", ""); ?>" class='inputbox' maxlength="250" placeholder="Website Address" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_13_div'>
<label class='title'>Position you are applying for <span style="color:red;">*</span></label>
<input type="text" name="field_13" id="field_13" value="<?php phpfmg_hsc("field_13", ""); ?>" class='inputbox' maxlength="250" placeholder="Title of Job You Are Applying For" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_14_div'>
<label class='title'>Attach Your Resume (Cover Letter) <span style="color:red;">*</span> </label>
<input type="file" name="field_14" id="field_14" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px; margin-bottom:5px;" />
</div>
</td>
<td colspan="2">
<div class='field_block' id='field_15_div'>
<label class='title'>Attach Your Cv (Curriculum Vitae) <span style="color:red;">*</span></label>
<input type="file" name="field_15" id="field_15" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px; margin-bottom:5px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_16_div'>
<label class='title'>Present / Most Resent Job and Salary <span style="color:red;">*</span></label>
<input type="text" name="field_16" id="field_16" value="<?php phpfmg_hsc("field_16", ""); ?>" class='inputbox' maxlength="250" placeholder="Present / Resent Job and Salary" autocomplete="off" style="width:295px;" />
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_17_div'>
<label class='title'>When could you start? <span style="color:red;">*</span></label>
<input type="text" name="field_17" id="field_17" value="<?php phpfmg_hsc("field_17", ""); ?>" class='inputbox' maxlength="100" placeholder="Available to Start" autocomplete="off" style="width:295px;" />
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_18_div'>
<label class='title'>Are you willing to relocate if applicable? <span style="color:red;">*</span></label>
<?php phpfmg_dropdown( 'field_18', "- Please Select Option -=|Not Applicable|Yes|No|Not Sure" );?>
</div>
</td>
<td valign="top" style="width:50%">
<div class='field_block' id='field_19_div'>
<label class='title'>Last 3 jobs held Including Dates <span style="color:red;">*</span></label>
<textarea name="field_19" id="field_19" class='textarea' maxlength="400" data-limit="400" placeholder="Please tell us about the last 3 jobs you have had, if that many, giving a discrption and the start finshed dates." style="width:295px; height:60px;"><?php phpfmg_hsc("field_19"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%">
<div class='field_block' id='field_20_div'>
<label class='title'>Attach References </label>
<input type="file" name="field_20" id="field_20" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px;" />
</div>
</td>
<td colspan="2">
<div class='field_block' id='field_21_div'>
<label class='title'>Other attachment of interest i.e. Photo </label>
<input type="file" name="field_21" id="field_21" value="" class='inputbox' onchange="fmgHandler.check_upload(this);" style="width:310px;" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class='field_block' id='field_22_div'>
<label class='title'>Please tell us what you think makes you suitable for this position <span style="color:red;">*</span></label>
<textarea name="field_22" id="field_22" class='textarea' maxlength="1500" data-limit="1500" placeholder="Please tell us of any experience you have that makes you suitable for this position?" style="width:627px; height:60px;"><?php phpfmg_hsc("field_22"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class='field_block' id='field_23_div'>
<label class='title'>Tell us more about yourself, Hobbies and Interests <span style="color:red;">*</span></label>
<textarea name="field_23" id="field_23" class='textarea' maxlength="1500" data-limit="1500" placeholder="Please tell us more about yourself, your temperament, personality. Are you a positive and punctual person. Do you work well with others as a team or on your own. Hobbies and interests. Anything else relevant to this position." style="width:627px; height:60px;"><?php phpfmg_hsc("field_23"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class='field_block' id='field_24_div'>
<label class='title'>Comments / Questions </label>
<textarea name="field_24" id="field_24" class='textarea' maxlength="1000" data-limit="1000" placeholder="Please leave any comment or ask any questions you might have." style="width:627px; height:60px;"><?php phpfmg_hsc("field_24"); ?>
</textarea><span style="color:#999999; width:25px; font-size:10px; float:right; margin-top:1px; margin-right:13px;" class="countdown"></span>
</div>
</td>
</tr>
<tr>
<td valign="top" style="width:50%"><div class='field_block' id='phpfmg_captcha_div'>
<div class='col_label'>
<label class='title'>Security Code: <span style="color:red;">*</span></label>
<?php phpfmg_show_captcha(); ?>
</div>
</div>
<div>
<div class='col_label'> </div>
<div class='form_submit_block col_field'>
<div id='err_required' class="form_error" style='display:none;'>
<label class='form_error_title'>Please check Captcha Security Code</label>
</div>
<br />
<input type='submit' value='Submit' class='form_button' /> <span class="required">Required <span style="color:red;">*</span></span>
<span id='phpfmg_processing' style='display:none;'> <img id='phpfmg_processing_gif' src='<?php echo PHPFMG_ADMIN_URL . '?mod=image&func=processing' ;?>' border="0" alt='Processing...' />
<label id='phpfmg_processing_dots'></label>
</span> </td>
<td valign="top" style="width:50%"> </td>
</tr>
</table>
</form>
</fieldset>
</div>
<!-- this is the iframe -->
<iframe src="assets/form.php" name="iframe" width="780" height="1770" id="iframe" frameborder="0" scrolling="auto"></iframe>
为了从 iframe 内部滚动父窗口，您需要访问父窗口的 jQuery 实例。从iframe内部，这可在 window.parent.$ .
// From inside iframe
window.parent.$('html, body').animate({
scrollTop: window.parent.$("#frmFormMail").offset().top
}, 'slow');
如果你没有在 iframe 范围内使用 jQuery，你可以将$定义为父级的$，这样可以避免多次写出window.parent.$：
// From inside iframe
// Reference parent window's jQuery instance. Assuming we're not
// already using $ for jQuery in this scope.
var $ = window.parent.$;
$('html, body').animate({
scrollTop: $("#frmFormMail").offset().top
}, 'slow');
相关文章：
- 在firefox和chrome中的左侧显示iframe滚动条
- 使用浏览器滚动条而不是iframe滚动条
- 将IFrame滚动到顶部在Chrome中不起作用
- Iframe滚动溢出隐藏在css中不起作用
- 如何使父网页从 iframe 滚动到特定位置(顶部）
- Iframe 滚动条不在页面右侧
- 可以 jQuery invalidHandler 通过父窗口中的 iframe 滚动顶部
- 在Facebook iframe滚动条或页面中途剪切之间进行选择
- 如何在特定iframe滚动条的滚动条上调用适当的JavaScript方法
- 在javascript中反复切换iframe滚动条
- 如何自定义twitter iframe滚动条的样式
- 调整iframe滚动到屏幕分辨率的高度
- JQuery:如何连接事件到iFrame滚动
- 从iframe滚动到顶部
- 如何修改iframe滚动
- 在隐藏和显示Iframe元素后，Iframe滚动条不显示在chrome中
- 使iframe滚动条消失
- 在iframe滚动之前禁用复选框
- 如何在javascript中正确地将IFrame滚动到底
- Iframe滚动问题.解决方案是什么
