我正在开发一个Chrome扩展,目的是让用户对我们大学的Drupal CMS的页面之间的导航有更多的控制。我希望能够影响的事情之一是,在进行了保存操作之后,页面的导航位置。保存操作是由 <form>
使用POST方法的元素,其 action
属性设置为与本页面相同的URL。但是,根据现在的页面是哪种类型,保存操作(点击 "保存 "按钮)的时候,会出现 "保存 "的情况。<input type="submit">
元素)将导致导航到另一个页面,或使该页面保持在同一位置。我希望用户能够在保存后通过选择一个选项来选择导航到哪个页面。<select>
元素,我在扩展中添加了这个元素。这将导致一个chrome.storage对象来存储所需的目标URL,然后在一个 window.addEventListener("beforeunload")
函数,于是一个 window.location.href = <desired URL>
被执行。为了显示保存的内容,页面也必须重新加载。
对我来说,仅从客户端工作的问题是要知道什么时候引导到选定的位置。如果太早发生,保存操作就不会完成。如果发生得太晚,默认页面就有时间被加载,时间就会流失。我已经设法使其临时工作,通过插入一个 setTimeout()
函数,但超时间隔当然是任意的,可能会根据很多情况而失败。有没有办法在js脚本中检测到POST操作已经完成,现在可以安全地加载一个新的页面?
现在的代码。
HTML
<select class="my-selector">
<option value="URL1">page 1</option>
<option value="URL2">page 2</option>
<!--etc -->
</select>
JS
$(".my-selector").change(function(){
var url = $(this).val();
chrome.storage.sync.set({redirect:true,url:url})
$(this).closest("form").submit();
});
//=============
window.addEventListener("beforeunload", function() {
chrome.storage.sync.get(function(message){
if(message.redirect){
chrome.storage.sync.set({redirect:false,reload:true});
setTimeout(function(){ //this I want to avoid
window.location.href = message.url;
},3000);
}
})
});
//=============
$(document).ready(function(){
chrome.storage.sync.get(function(message){
if(message.reload){
chrome.storage.sync.set({reload:false});
location.reload();
}
});
//etc
});
这个答案并没有提供一个检测POST操作是否完成的方法--而是使用AJAX劫持了post操作。但它完成了我心中的任务,即把表单数据的发送和下一页的导航分开。 基于来自 wOxxOm'的评论,我已经得到了下面的程序,使用 表格数据API 和jQuery $.post()
操作。我不知道这是否是最理想的--是否有更直接的方法来创建这个 formObj
对象?欢迎提供任何建议。
HTML
<select class="my-selector">
<option value="URL1">page 1</option>
<option value="URL2">page 2</option>
<!--etc -->
</select>
JS
$(".my-selector").change(function(){
var link = $(this).val();
var myForm = $(this).closest("form").get(0);//select the form
var url = $(myForm).attr("action");
var formData = new FormData(myForm);//use FormData API to extract the data to send
var formObj = {};
for(var pair of formData.entries()){
formObj[pair[0]] = pair[1];//create the object to send the data with
}
$.post(url,formObj,function(){ //send the data without submitting the form
window.location.href = link; //redirect to desired location
});
});