提交表单/使用JavaScript获取HTML而不使用iframe
Submitting form/getting HTML with JavaScript without iframe?
上下文:我从事学生工作,在网络应用程序中转录论文报告。它很旧,不幸的是,我们无法更改源代码,也无法直接运行DB查询。
它只会在你提交整个表格后检查唯一ID是否存在,除非完全填写,否则你不能提交。不用说,这是一种巨大的时间浪费,因为你经常转录整件事,却发现它是重复的。
目标:我制作了下面的用户脚本,用于启动搜索-在唯一ID的输入(noReferenceDeclart)的onblur上进行搜索,检查是否有任何匹配(行),并相应地返回。与Greasemonkey一起跑步。搜索表单位于同一域的另一个页面中。搜索表单不接受任何URL参数。
这可以在不使用iframe(也许是AJAX?)的情况下完成吗这是我自己提高生产力的工具;同时学习JS。由于我还是一个初学者,所以任何让代码更干净的技巧都是受欢迎的。
//Adding function to input's blur event
$(document).on ("blur", "#noReferenceDeclarant", isRefNumberExists);
//Vars
var noReferenceDeclarant = '';
var loadCode = 0;
var $searchForm;
//Fonctions
function isRefNumberExists ()
{
noReferenceDeclarant = $('#noReferenceDeclarant').val();
loadCode = 0;
//Make sure there's data in the input before proceeding
if (noReferenceDeclarant)
{
//Build search iframe
$searchForm = $('<iframe />', {
name: 'searchWindow',
src: 'rechercherGriIntranet.do?methode=presenterRechercher',
id: 'searchWindow',
width: 0,
height: 0
}).appendTo('body');
$searchForm.load(searchRefNumber);
}
}
function searchRefNumber()
{
var isExists = false;
//Check which "load" it is to avoid submit loops
if (loadCode === 0)
{
loadCode = 1;
//Filling search form with search term
$(this.contentDocument).find('#noReference').val(noReferenceDeclarant);
//Set search form preferences
$(this.contentDocument).find('#typeRapportAss').prop('checked', false);
$(this.contentDocument).find('#typeRapportAS').prop('checked', false);
$(this.contentDocument).find('#typeRapportSI').prop('checked', true);
//Submit the form
$(this.contentDocument).find('form:first').submit();
}
else if (loadCode === 1)
{
loadCode = 2;
//See if there are any tr in the result table. If there are no results, there a thead but no tr.
var foundReports = $(this.contentDocument).find('.resultatRecherche tr').length;
if (foundReports > 0)
{
if (confirm('A report matching this ID already exists. Do you want to display it?'))
{
//Modal window loading the report in an iframe. Not done yet but that's fairly straightforward.
}
else
{
//Close and return to the form.
}
}
}
//Reset variables/clean ressources
delete $searchForm;
$('#dateRedactionRapport').focus();
}
总的来说,我看到了更糟糕的代码。
Ajax可以做到这一点,但您只需要将Ajax响应放入DOM中(很可能是作为iframe)。
在这种情况下,我会保留你的方法。我认为这是最理智的。j
如果没有完整的上下文,可能会有一种方法来清理loadCode——但您所拥有的内容是完全相同的,并且有效。很多人会称之为semaphore
,但这只是一个术语问题。
我唯一要清理的是建议不要经常调用jQuery对象。
// Many folks recommend that jQuery variables be named $<something>
var $doc = $(this.contentDocument);
doc.find('#typeRapportAss').prop('checked', false);
$doc.find('#typeRapportAS').prop('checked', false);
$doc.find('#typeRapportSI').prop('checked', true);
如果你想玩jQuery数据结构,你可以制作一个"config"对象,看起来像这样:
var formValues = {
typeRapportAs: false,
typeRapportAS: false,
typeRapportSI: true
};
然后将其迭代到(使用for ... in
和.hasOwnProperty
)。
这个项目不需要,你正在做的很好,但它可能是一个学习练习。
相关文章:
- 通过javascript/html访问twitter共享iframe
- 如何关闭html中的iframe弹出窗口
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- 当#在iFrame中使用HTML时,阻止页面移动
- 如何在两个不同的iframe HTML之间进行通信
- 在iframe的情况下,jQuery html()将失败
- 如何使用Javascript在FireFox中将html从内存动态加载到iframe中
- 将HTML表单发布到iframe会导致浏览器历史记录出现问题
- 如何使用 jquery 动态创建 iframe HTML
- 如何在弹出窗口中访问 iframe.html在 chrome 扩展程序中
- 在 Flex-iFrame html 中调用 JavaScript 函数不会发生
- javascript firefox iframe <html> trouble
- 从父窗口获取iframe html或名称
- 如何使用jquery检查iframe html文件滚动是否达到底部
- 如何在bootstrap模式中改变iframe HTML
- 嵌入IFrame html页面读取IFrame html属性
- 在iframe html中插入本地javascript
- 如何从diff来源获得iframe html
- 带有flash内容的iframe html页面会给下拉菜单带来问题
- 退出iframe HTML元素