Ajaxとポップアップウィンドウがブラウザにブロックされた(windows.open)問題
6735 ワード
最近、プロジェクトでは、フロントエンドページのjsファイルでバックグラウンドからURLを取得し、URLを取得してwindowsを呼び出す必要がある.OpenメソッドはこのURLを開きます.URLはバックエンドプログラムでつなぎ合わせられ、開発過程で2つの問題に遭遇した.フロントエンドjsコードは以下の通りである.
1.ウィンドウをポップアップしてURLを取得する場合がありますの上のコードはよく空白のページを開く結果が現れて、分析の原因はAjaxの非同期要求のバックエンドで、まだURLを受け取っていないでwindowsを実行しました.Openメソッドにより、空白ページ(URL初期値付与"_blank") が開く.は解決を試みて、弾窓論理をコールバック関数successの中に置いて、確かに先にURLを手に入れてからwindowsを実行することを保証することができます.Openメソッドですが、また新しい問題が出てきました.
2.ブラウザのポップアップウィンドウの問題ポップアップウィンドウロジックをAjaxのコールバック関数successに入れると、ポップアップウィンドウはIEブラウザでブロックされます.これは、ブラウザがセキュリティポリシーによって非ユーザークリックポップアップウィンドウをブロックしているためです.非ユーザークリックとは、ポップアップウィンドウが直接ユーザークリックイベントによってトリガーされるポップアップウィンドウではないことです.この論理では、ポップアップイベントはプログラムによって開始されるため、ブラウザによってブロックされます.しかし、ユーザーにとってこのような体験は悪いに違いありません.ブラウザやプログラムをよく知っているユーザーを期待することはできません.そこで検索によって解決方法が見つかり、更新されたコードは以下の通りである: 上述のJSコードはウィンドウを開く動作をリスニングボタンクリックイベントの下に置いて、Ajax関数が実行する前に、私はプロジェクトのローカルにloadingアニメーションのページを追加して、本当のバックグラウンドから伝わったURLを手に入れる前に、ポップアップしたウィンドウはすべてこのLoadingページで待っています.Ajaxが本物のURLを返すと、ウィンドウを新しいURLにリダイレクトします.この設定により、ポップアップウィンドウがブラウザによってブロックされる問題を解決することに成功しました.
3.Ajaxに対する好奇心と初歩的な探求 Ajaxとは何ですか Ajaxはどのように実現します 実際に何回かAjaxを使ってバックグラウンドと対話した後、このような使いやすい技術はどのように実現されたのかと思わず考えました.初歩的な推測では、別のスレッドが作成され、サブスレッドで操作され、サブスレッドでローカルページが更新されます. が検索したところ、Ajaxリクエストの核心は から
Ajaxが登場して20年近くの歴史がありますが、代替技術はありますか? 私の検索を通じて、Ajaxに取って代わるという伝説の技術を発見しました.Fetchと呼ばれています.もちろん、具体的にAjaxに取って代わることができるかどうかは観察し続けるかもしれませんが、この技術についてはよく知っています.
引用W 3 C Schoolの一節:十数年来、XMLHttpRequestオブジェクトはずっとAJAX操作に受け入れられてきたが、XMLHttpRequestオブジェクトのAPI設計はあまりよくなく、入力、出力、状態は同じインタフェースで管理され、非常に混乱したコードを書きやすいことを知っている.Fetch APIはポテンシャルに応じて生成され,善不完全なXMLhttpRequestオブジェクトに取って代わる新しい仕様を提供する.Fetch APIには主に2つの特徴がある:1つはインタフェースの合理化であり、AJAXはすべての異なる性質のインタフェースをXHRオブジェクトに配置し、Fetchはそれらをいくつかの異なるオブジェクトに分散し、設計がより合理的である.2つ目はFetch操作がPromiseオブジェクトを返し、ネストされたコールバック関数を回避することです.次にFetchの勉強に少し時間をかけて、Fetch APIの公式ドキュメントを添付します.
showWindow : function() {
Fw.Ajax.request({
url : '/ebank/callCenter.do',
params : {'COMPY_NAME':COMPY_NAME},
page : false,
success : function(data) {
callCenterUrl = data.call_center_url;
},
if(callCenterUrl != null) {
window.open(callCenterUrl,'_blank','width=850, height=600, resizable=yes, toolbar=no, menubar=no');
}else {
alert(" ， ");
}
onFailure : function() {
},
});
},
1.ウィンドウをポップアップしてURLを取得する場合があります
2.ブラウザのポップアップウィンドウの問題
showWindow : function() {
// ， Ajax
var adPopup = window.open(callCenterUrl,'_blank','width=850, height=600, resizable=yes, toolbar=no, menubar=no');
Fw.Ajax.request({
url : '/ebank/callCenter.do',
params : {'COMPY_NAME':COMPY_NAME},
page : false,
success : function(data) {
callCenterUrl = data.call_center_url;
if(callCenterUrl != null) {
// ，
adPopup.location = callCenterUrl;
}else {
alert(" ， ");
}
},
onFailure : function() {
},
});
},
3.Ajaxに対する好奇心と初歩的な探求
AJAX is not a programming language. It is just a technique for creating better and more interactive web applications. AJAX=Asynchronous JavaScript and XML(非同期JavaScriptとXML).AJAXは新しいプログラミング言語ではなく、既存の標準を使った新しい方法です.AJAXはサーバとデータを交換し、一部のページを更新するアートで、ページ全体を再ロードせずにローカルページをリフレッシュします.XMLHttpRequestであり、元のAjax全体がバックグラウンドとインタラクティブにローカルページをリフレッシュする技術がこの対象であることが分かった.XMLHttpRequestの紹介はたくさんありますが、ここではAjax実装パッケージのみを貼って自分の記憶を支援します.コードはAJAXの実現原理及びパッケージvar $={
/* ， */
/*{‘name’:’jack,’age’:20}=> name=jack&age=20&*/
getParmeter:function(data){
var result="";
for(var key in data){
result=result+key+"="+data[key]+"&";
}
/* & */
return result.slice(0,-1);
},
/* ajax */
ajax:function(obj){
/*1. ， */
if(obj==null || typeof obj!="object"){
return false;
}
/*2. , ， get*/
var type=obj.type || 'get';
/*3. url location.pathname: */
var url=obj.url || location.pathname;
/*4. */
var data=obj.data || {};
/*4.1 */
data=this.getParmeter(data);
/*5. */
var success=obj.success || function(){};
/*6: */
/*6.1: */
var xhr=new XMLHttpRequest();
/*6.2: , ， url*/
if(type=='get'){
url=url+"?"+data;
/* ， post */
data=null;
}
xhr.open(type,url);
/*6.2: : ， post */
if(type=="post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
/*6.3: ,post */
xhr.send(data);
/*7. */
xhr.onreadystatechange=function(){
/*8. */
if(xhr.status==200 && xhr.readyState==4){
/* */
var result=null;
/*9. Content-Type --- */
var grc=xhr.getResponseHeader("Content-Type");
/*10. Content-Type */
if(grc.indexOf("json") != -1){
/* js */
result=JSON.parse(xhr.responseText);
}
else if(grc.indexOf("xml") != -1){
result=xhr.responseXML;
}
else{
result=xhr.responseText;
}
/*11. ， */
success(result);
}
}
}
};
jquery ：
$.ajax({
url:'',
type:'',
data: {},
success:function(result){
//code...
}
});