172

मैं शुद्ध रूप से जावास्क्रिप्ट में एक OAuth प्रमाणीकरण प्रवाह विकसित कर रहा हूं और मैं एक पॉपअप में उपयोगकर्ता को "अनुदान पहुंच" विंडो दिखाना चाहता हूं, लेकिन यह अवरुद्ध हो जाता है।

मैं अलग-अलग ब्राउज़रों के पॉप-अप ब्लॉकर्स द्वारा या तो बनाई गई खिड़कियों को कैसे अवरुद्ध कर सकता हूं window.openया window.showModalDialogअवरुद्ध किया जा सकता है?

— पाब्लो फर्नांडीज
स्रोत

11

यहां तक कि अगर यह संभव था (मुझे नहीं पता), अगर लोग पॉपअप ब्लॉकर्स का उपयोग करते हैं तो आपको इसका सम्मान करना चाहिए। अधिकांश ब्राउज़र एक संदेश प्रदर्शित करते हैं जब एक साइट ने एक पॉपअप खोलने की कोशिश की ताकि वे अभी भी देख सकें कि वे चाहते हैं। आप अपनी साइट पर एक टिप्पणी डाल सकते हैं कि कुछ सामग्री पॉपअप में खुलती है और उपयोगकर्ता को आगे बढ़ने की अनुमति देनी चाहिए।

— फेलिक्स क्लिंग

5

सबसे अच्छा अभ्यास इस तरह दिखाई देगा: 1) इसे सफलतापूर्वक 2 करें) अपनी खिड़कियों को शटर करें और परेशान वेब-संरक्षक 3 की भीड़ को इकट्ठा करने के डर से अपने दरवाजे और टावर को बंद करें) पश्चाताप, पॉप-अप-बस्ता-बस्ता को हटा दें और सम्मान करें आपके दर्शक

— एलेक्स मैकपीप

एलेक्स और फेलिक्स, मैंने सवाल अपडेट किया है। मैं बुराई के लिए ज्ञान का उपयोग नहीं करेगा :)। धन्यवाद!

— पाब्लो फर्नांडीज

9

मैं जोड़ना चाहूंगा कि पॉपअप ब्लॉकर को दरकिनार करने से वास्तव में उपयोगकर्ता अनुभव को बेहतर बनाने की कोशिश हो सकती है। अब मैं एक उदाहरण पर काम कर रहा हूं, हम एक जावास्क्रिप्ट एप्लिकेशन (एक्सटीजेएस पर आधारित) का उपयोग कर रहे हैं और हम उपयोगकर्ताओं को पेपाल का उपयोग करने देने का प्रयास कर रहे हैं। हम उन्हें एक बटन दे रहे हैं जिसे वे एक नई विंडो में पेपाल लॉन्च करने के लिए क्लिक कर सकते हैं, लेकिन IE के कुछ संस्करण इसे पॉपअप के रूप में अवरुद्ध कर रहे हैं (भले ही यह एक बटन क्लिक है)। यदि वे अब पॉपअप को सक्षम करते हैं, तो स्क्रीन पुनः लोड होता है और जावास्क्रिप्ट ऐप के रूप में, हम विंडो स्थिति खो देते हैं और उन्हें शुरू करना होता है। तो वास्तव में: समस्या आईई गूंगा है।

— 14

1

@FelixKling हाँ यह संभव है। ब्राउज़र निर्माताओं ने पहले ही इस बारे में सोचा था। पॉपअप खोलना ठीक है जहां तक उपयोगकर्ता का इरादा है (उपयोगकर्ता द्वारा किसी लिंक या बटन पर क्लिक करने पर संकेत दिया गया है)। पॉपअप ब्लॉकर्स को उपयोगकर्ता के इरादे का सम्मान करना चाहिए। यदि IE का पॉपअप अवरोधक नहीं है, तो यह पॉपअप अवरोधक है जो गलती पर है। उपयोगकर्ता पॉपअप ब्लॉकर्स का उपयोग अपनी इच्छा से पॉपअप को खोलने से रोकने के लिए करते हैं, न कि पॉपअप को अवरुद्ध करने के लिए जिसे वे स्वयं खोलने की कोशिश करते हैं (एक बटन या लिंक पर क्लिक करके)।

— Stijn de Witt

286

सामान्य नियम यह है कि पॉपअप ब्लॉकर्स संलग्न होंगे अगर window.openया जावास्क्रिप्ट से लागू किया जाता है जो प्रत्यक्ष उपयोगकर्ता कार्रवाई द्वारा लागू नहीं किया जाता है । यही है, आप window.openपॉपअप अवरोधक से टकराए बिना एक बटन क्लिक के जवाब में कॉल कर सकते हैं , लेकिन अगर आप एक ही घटना को एक टाइमर कार्यक्रम में डालते हैं तो यह अवरुद्ध हो जाएगा। कॉल श्रृंखला की गहराई भी एक कारक है - कुछ पुराने ब्राउज़र केवल तत्काल कॉलर को देखते हैं, नए ब्राउज़र यह देखने के लिए थोड़ा पीछे कर सकते हैं कि क्या कॉलर का कॉलर माउस क्लिक था आदि इसे उथले के रूप में रखें जैसा कि आप पॉपअप ब्लॉकर्स से बचने के लिए कर सकते हैं।

— dthorpe
स्रोत

2

दिलचस्प बात यह है कि चुनिंदा तत्व से बंधे बदलाव इवेंट के माध्यम से शुरू किए गए पॉपअप (क्रोम में, एफएफ नहीं) अवरुद्ध हो जाएंगे, भले ही उस घटना को एक क्लिक की तरह प्रत्यक्ष उपयोगकर्ता कार्रवाई द्वारा शुरू किया गया हो। हालाँकि यदि किसी इनपुट के लिए बाध्य हैं, तो उन्हें अनुमति है। अजीब।

— ccnokes

6

किसी ने नहीं कहा कि ब्राउज़र सुसंगत था। : P

— dthorpe

8

प्रयोगों के माध्यम से मुझे समझ में आया है कि स्टैक डेप्थ का पॉपअप ब्लॉकर से कोई लेना-देना नहीं है। यह वास्तव में जाँचता है कि क्या window.open को उपयोगकर्ता की कार्रवाई के बाद 1 सेकंड के भीतर कॉल किया जाता है या नहीं। क्रोम 46 और फ़ायरफ़ॉक्स 42 में परीक्षण किया गया।

— मेस्कालिटो

इस पृष्ठ पर @ tj-crowder द्वारा उत्तर का उपयोग करके अनिश्चित समय के लिए अनुमति देने वाले दोनों ब्राउज़रों में 1 सेकंड का समय समाप्त किया जा सकता है .. क्या आपके पास ajax के माध्यम से कॉल करने वाला URL कुछ php (या जो भी) नींद का उपयोग करता है ( ) प्रतिसाद देने से पहले कुछ समय के लिए। पृष्ठ को 'लोड' करते समय ब्राउज़र लटका रहेगा .. फिर प्रतिक्रिया मिलने पर पॉपअप को ट्रिगर करें। क्रोम में, हालांकि, आपको इस ट्रिक को काम करने के लिए ajax () से ठीक पहले एक अलर्ट () जोड़ना होगा।

— धूमधाम

184

जेसन सेब्रिंग के बहुत उपयोगी टिप के आधार पर , और यहाँ और वहाँ कवर सामान पर , मुझे अपने मामले के लिए एक सही समाधान मिला:

जावास्क्रिप्ट स्निपेट के साथ छद्म कोड:

तुरंत उपयोगकर्ता की कार्रवाई पर एक खाली पॉपअप बनाएं
```
var importantStuff = window.open('', '_blank');
```
वैकल्पिक: कुछ "प्रतीक्षा" जानकारी संदेश जोड़ें। उदाहरण:

a) एक बाहरी HTML पेज: उपरोक्त लाइन को बदलें
```
var importantStuff = window.open('http://example.com/waiting.html', '_blank');
```
बी) पाठ: ऊपर दी गई नीचे दी गई पंक्ति जोड़ें:
```
importantStuff.document.write('Loading preview...');
```
तैयार होने पर सामग्री के साथ इसे भरें (जब AJAX कॉल लौटाया जाता है, उदाहरण के लिए)
```
importantStuff.location.href = 'http://shrib.com';
```

window.openआपको जो भी अतिरिक्त विकल्प की आवश्यकता है, उसके साथ कॉल को समृद्ध करें ।

मैं वास्तव में एक मेल पुनर्निर्देशन के लिए इस समाधान का उपयोग करता हूं, और यह मेरे सभी ब्राउज़रों (विंडोज 7, एंड्रॉइड) पर काम करता है। _blankबिट मोबाइल पर काम करने के लिए इन्हें मेल पुनर्निर्देशन के लिए मदद करता है, btw।

तुम्हारा अनुभव? इसे सुधारने का कोई तरीका?

— स्विस मिस्टर
स्रोत

1

? तो आप क्या करते हैं अगर यह ब्राउज़र में उपयोगकर्ता की कार्रवाई से नहीं है? मेरे उदाहरण के लिए, उपयोगकर्ता द्वारा सर्वर के खिलाफ प्रमाणित होने के बाद, उसे

— डॉन चीडल

@mmcrae ऐसा नहीं करते हैं। जो कुछ भी आप इसे करने का इरादा रखते हैं, पॉपअप विंडो की तुलना में बेहतर तरीका है। अन्यथा, संभावना है कि मैं आपकी साइट कभी नहीं देखना चाहूंगा। आज के ब्राउज़र सुनिश्चित करते हैं कि आप ऐसा करने में सक्षम नहीं होना चाहिए - @dthorpe का उत्तर देखें ।

— स्विस मिस्टर

5

Whatever it is you intend to do, there is a better way than a popup windowजबरदस्त हंसी? विषम सामान्यीकरण। ग्राहक चाहेंगे कि वह पृष्ठ खुला रहने के लिए प्रमाणित हो, और नए टैब में खोलने के लिए प्रमाणीकरण के बाद नई साइट / लैंडिंग पृष्ठ। हां, उत्कृष्ट उपयोगकर्ता अनुभव के बारे में मेरा विचार नहीं ... लेकिन यह उचित है

— डॉन चेडल

@mmcrae। बैठो और गंभीरता से सोचो। मैं आपसे वादा करता हूं कि आप जिस परिदृश्य का वर्णन करते हैं उसमें आपको "उपयोगकर्ता कार्रवाई" मिलेगी। मेरे उत्तर का पूरा बिंदु यह है कि आप पॉपअप विंडो बनाते हैं जब आपके पास उपयोगकर्ता कार्रवाई होती है - और फिर इसे बाद में सामग्री के साथ भरें। आपके मामले के लिए संकेत: उपयोगकर्ता "प्रामाणिक" हिट करता है -> पॉपअप (खाली) बनाएं; टाइमर ऊपर है या सर्वर प्रतिक्रिया वापस या जो भी है -> पॉपअप में सामग्री भरें।

— स्विस मिस्टर

3

उपयोगी टिप, यदि अजाक्स अनुरोध विफल हो जाता है, importantStuff.closeतो नया टैब बंद करने और मूल पृष्ठ में प्रदान करने और अलर्ट करने के लिए कॉल करें ।

— हंस

24

स्विस मिस्टर पोस्ट के अलावा, मेरे मामले में window.open को एक वादे के अंदर लॉन्च किया गया था, जिसने पॉपअप ब्लॉकर चालू किया, मेरा समाधान था: कोणीय में:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

browserService:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

यह है कि आप वादा प्रतिसाद का उपयोग करके एक नया टैब कैसे खोल सकते हैं और पॉपअप अवरोधक को लागू नहीं कर सकते हैं।

— डेविड
स्रोत

1

इसके चलते मेरा समाधान हो गया! जहाँ मैंने खुले टैब वाले एक वैरिएबल को बनाया, और फिर डेटा लोड होने के बाद url भर दिया। धन्यवाद। const tab = window.open(); observable.subscribe(dataUrl => tab.location.href = dataUrl);

— जोनास

1

यदि आपके पास पॉपअप ब्लॉकर है तो यह पॉपअप ब्लॉकर के साथ समस्या को ठीक नहीं करेगा ...

— एलेजांद्रो वेल्स

@Alejandro Vales jonas सॉल्यूशन केवल तभी काम करेगा जब कोड ऑनक्लिक इवेंट या किसी उपयोगकर्ता के इंटरैक्शन से चलेगा। जब आप एक वादा के साथ windows.open के माध्यम से एक नया टैब खोलने का प्रयास करते हैं, तो टाइमआउट, सदस्यता लें ... ब्राउज़र को लगता है कि यह उपयोगकर्ता पर एक हेरफेर है, इसलिए समाधान वादा दर्ज करने से पहले एक उदाहरण बनाने के लिए है, आपके अंदर सिर्फ बदलाव जॉन्स की तरह href किया

— डेविड

@ डेविड आपका बहुत बहुत धन्यवाद !!! मैं उस .thenउत्तर को देखने के लिए नहीं हुआ और इसीलिए मैं इतना भ्रमित हो गया: / SRY ...

— एलेजांद्रो वेल्स

@ डेविड यह बहुत अच्छा है! एक जादू की तरह काम करता है। अगर मैं आपको सिर्फ एक और सवाल के साथ परेशान कर सकता था - क्या आप जानते हैं कि यह काम एज में कैसे किया जाता है? एक सही संसाधन के लिए एक कुहनी से मदद मिलेगी ...

— dzenesiz

21

एक अच्छा अभ्यास के रूप में मुझे लगता है कि यह एक अच्छा विचार है कि अगर कोई पॉपअप अवरुद्ध हो और मामले में कार्रवाई की जाए तो यह एक अच्छा विचार है । आपको यह जानना होगा कि window.open का रिटर्न मान है, और यदि कार्रवाई विफल हो गई तो यह मान शून्य हो सकता है। उदाहरण के लिए, निम्नलिखित कोड में:

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

यदि पॉपअप अवरुद्ध है, तो window.open अशक्त हो जाएगा। तो फ़ंक्शन गलत वापस आ जाएगा।

एक उदाहरण के रूप में, इस फ़ंक्शन को सीधे किसी भी लिंक से कॉल करने की कल्पना करें target="_blank": यदि पॉपअप सफलतापूर्वक खोला गया है, तो लौटने falseसे लिंक कार्रवाई अवरुद्ध हो जाएगी, अन्यथा यदि पॉपअप अवरुद्ध हो जाता है, तो लौटने trueसे डिफ़ॉल्ट व्यवहार (नई _blank विंडो खोलें) और आगे बढ़ेगा ।

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

इस तरह से आपके पास एक पॉपअप होगा यदि यह काम करता है, और एक _blank विंडो नहीं तो।

यदि पॉपअप नहीं खुलता है, तो आप कर सकते हैं:

उदाहरण में एक खाली विंडो खोलें और आगे बढ़ें
एक नकली पॉपअप खोलें (पृष्ठ के अंदर एक iframe)
उपयोगकर्ता को सूचित करें ("कृपया इस साइट के लिए पॉपअप की अनुमति दें")
एक रिक्त विंडो खोलें और फिर उपयोगकर्ता आदि को सूचित करें।

— FrancescoMM
स्रोत

धन्यवाद। काम किया!

— बकार्ट

8

Google के oauth जावास्क्रिप्ट API से:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

वह क्षेत्र देखें जहां यह पढ़ता है:

प्रमाणीकरण स्थापित करना

OAuth 2.0 के क्लाइंट का कार्यान्वयन उपयोगकर्ता को साइन-इन करने और एप्लिकेशन को स्वीकृत करने के लिए प्रेरित करने के लिए पॉपअप विंडो का उपयोग करता है। जैसे ही यह पॉपअप ब्लॉकर्स को अप्रत्यक्ष रूप से खोलता है, वैसे ही पहले कॉल को gapi.auth.authorize पॉपअप ब्लॉकर्स को ट्रिगर कर सकता है। पॉपअप ब्लॉकर को ऑवर कॉल्स पर ट्रिगर होने से रोकने के लिए, क्लाइंट के लोड होने पर कॉल करें gapi.auth.init (कॉलबैक)। जब पुस्‍तकालय कॉल करने के लिए पुस्‍तकालय तैयार हो तो आपूर्ति की गई कॉलबैक निष्पादित की जाएगी।

मैं इसके वास्तविक उत्तर से संबंधित अनुमान लगाऊंगा कि यह कैसे बताता है कि अगर तत्काल प्रतिक्रिया होती है, तो यह पॉपअप अलार्म की यात्रा नहीं करेगा। "Gapi.auth.init" इसे बना रहा है ताकि एप तुरंत हो जाए।

व्यावहारिक आवेदन

मैंने npm पर नोड पासपोर्ट और प्रत्येक प्रदाता के लिए विभिन्न पासपोर्ट पैकेजों का उपयोग करके एक खुला स्रोत प्रमाणीकरण microservice बनाया। मैंने 3rd पार्टी के लिए एक मानक पुनर्निर्देशन दृष्टिकोण का उपयोग किया, जो इसे वापस आने के लिए एक पुनर्निर्देशित URL देता है। यह प्रोग्रामेटिक था इसलिए मुझे लॉगिन / साइनअप और विशेष पृष्ठों पर वापस रीडायरेक्ट करने के लिए अलग-अलग स्थान मिल सकते थे।

github.com/sebringj/athu

passportjs.org

— जेसन सेब्रिंग
स्रोत

3

मैंने कई समाधानों की कोशिश की, लेकिन उनका एकमात्र ऐसा है जो वास्तव में मेरे लिए सभी ब्राउज़रों में काम करता है

let newTab = window.open(); newTab.location.href = url;

— pomobc
स्रोत

2

यह सिर्फ उन लोगों के लिए काम नहीं करता है जिनके पास पॉपअप ब्लॉकर सक्षम है

— एलेजांद्रो वेल्स

क्या है url? इसे सौंपा नहीं गया है।

— shinriyo

@shinriyo url आप जिस भी पेज को एक्सेस करना चाहते हैं, उसका लिंक है, उदाहरण के लिएhttp://example.com

— pomoc

@AlejandroVales मेरे पास पॉपअप ब्लॉकर सक्षम है और यह काम करता है। समस्या यह है कि window.open()प्रोग्रामेटिक रूप से नई विंडो नहीं खोली जा सकती है और अगर हमें जरूरत है, तो इसका जवाब एक विकल्प है। newTabचर के साथ हम संदर्भ देते हैं window.open()और बाद में हम इसे कॉल कर सकते हैं, urlहम अपनी आवश्यकता को सम्मिलित कर सकते हैं, मेरे मामले में कुछ बूँद का url, और नया टैब प्रवेश किए गए url के साथ खोला जाएगा।

— 15

0

जब तक कॉलबैक सफलतापूर्वक वापस नहीं आया, मैं नया पेज नहीं बनाना चाहता था, इसलिए मैंने उपयोगकर्ता क्लिक पर अनुकरण करने के लिए ऐसा किया :

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}

— user3479425
स्रोत

3

Chrome 62 में मेरे लिए काम नहीं करता है। पॉपअप (पृष्ठ) अवरुद्ध हो जाता है।

— s.ermakovich

1

हां, आप सही हैं - मैंने इसे असंगत भी पाया है। मैंने अपने एपीआई कॉल को समकालिक बना दिया

— user3479425

-8

इससे छुटकारा पाने का सबसे आसान तरीका है:

दस्तावेज़ का उपयोग न करें। खोलें ()।
इसके बजाय इस का उपयोग करें ।ocument.location.href = स्थान; जहाँ स्थान को लोड किया जाना है

Ex:

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

इसने मेरे लिए बहुत अच्छा काम किया। चियर्स

— प्रमोद शेट्टी
स्रोत

2

नए टैब में url खोलने के बारे में क्या?

— 3 नियम

ब्राउज़र पॉपअप ब्लॉकर्स से बचें

Google के oauth जावास्क्रिप्ट API से: