ব্রাউজার পপআপ ব্লকারগুলি এড়িয়ে চলুন


172

আমি জাভাস্ক্রিপ্টে নিখুঁতভাবে একটি OAuth প্রমাণীকরণ প্রবাহ বিকাশ করছি এবং আমি ব্যবহারকারীকে একটি পপআপে "অনুদান অ্যাক্সেস" উইন্ডোটি দেখাতে চাই, তবে এটি ব্লক হয়ে যায়।

আমি কীভাবে তৈরি পপ-আপ উইন্ডোজগুলি window.openবা window.showModalDialogবিভিন্ন ব্রাউজারের পপ-আপ ব্লকারদের দ্বারা অবরুদ্ধ হওয়া থেকে রোধ করতে পারি ?


11
যদিও এটি সম্ভব ছিল (আমি জানি না), লোকেরা পপআপ ব্লকার ব্যবহার করে তবে আপনার এটি সম্মান করা উচিত। বেশিরভাগ ব্রাউজারগুলি কোনও পপআপ খোলার চেষ্টা করার সময় কোনও বার্তা প্রদর্শন করে যাতে তারা চাইলে এটি এখনও দেখতে পারে। আপনি আপনার সাইটে একটি মন্তব্য রাখতে পারেন যে কোনও সামগ্রী একটি পপআপে খোলে এবং ব্যবহারকারীর এটিকে এগিয়ে যাওয়ার জন্য অনুমতি দেওয়া উচিত।
ফেলিক্স ক্লিং

5
সেরা অনুশীলনটি দেখতে হবে: 1) এটি সফলভাবে করুন 2) আপনার উইন্ডোটি শাটার করুন এবং আপনার দরজা এবং কাওয়ারটি বিরক্ত করুন বিরক্ত হওয়া ওয়েব-পৃষ্ঠপোষকদের ভিড় থেকে ভয়ে 3) অনুতপ্ত হোন, পপ-আপ-বুস্তা-বুস্তাটি সরিয়ে দিন এবং সম্মান করুন আপনার শ্রোতা
অ্যালেক্স ম্যাক্প

অ্যালেক্স এবং ফেলিক্স, আমি প্রশ্নটি আপডেট করেছি। আমি জ্ঞানকে খারাপের জন্য ব্যবহার করব না :)। ধন্যবাদ!
পাবলো ফার্নান্দেজ

9
আমি যুক্ত করতে চাই যে কোনও পপআপ ব্লকারকে বাইপাস করা আসলে ব্যবহারকারীর অভিজ্ঞতা আরও ভাল করার চেষ্টা করা হতে পারে। উদাহরণস্বরূপ আমি এখন কাজ করছি, আমরা একটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন ব্যবহার করছি (এক্সট্রিজএসের উপর ভিত্তি করে) এবং আমরা ব্যবহারকারীদের পেপাল ব্যবহার করে অর্থ প্রদান করার চেষ্টা করছি। আমরা তাদের একটি বোতাম দিচ্ছি যা তারা একটি নতুন উইন্ডোতে পেপাল চালু করতে ক্লিক করতে পারে তবে IE এর কয়েকটি সংস্করণ এটিকে পপআপ হিসাবে ব্লক করছে (এটি বোতামের ক্লিকের পরেও)। যদি তারা এখন পপআপ, পর্দাটি পুনরায় লোড করে এবং একটি জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন হিসাবে সক্ষম করে, তবে আমরা উইন্ডো স্থিতি হারিয়ে ফেলি এবং সেগুলি আবার শুরু করতে হবে। তাই সত্যই: সমস্যা হ'ল বোবা।
NateDaint

1
@ ফেলিক্সকলিং হ্যাঁ এটা সম্ভব। ব্রাউজার নির্মাতারা এটি সম্পর্কে ইতিমধ্যে চিন্তা করে। ব্যবহারকারীর অভিপ্রায় যতটা পপআপ খোলা ঠিক আছে (ব্যবহারকারী কোনও লিঙ্ক বা বোতামে ক্লিক করে সিগন্যাল করেছেন)। পপআপ ব্লকারদের ব্যবহারকারীর উদ্দেশ্যকে সম্মান করা উচিত। যদি আই এর পপআপ ব্লকার না করে, তবে এটি পপআপ ব্লকারের দোষ। স্ক্রিপ্টগুলি পপআপগুলি ইচ্ছামতো খোলার থেকে আটকাতে ব্যবহারকারীরা পপআপ ব্লকারগুলি ব্যবহার করে, তারা নিজেরাই যে পপআপগুলি খোলার চেষ্টা করেছিল তা ব্লক করার জন্য নয় (একটি বোতাম বা লিঙ্ক ক্লিক করে)।
স্টিজন ডি উইট

উত্তর:


286

সাধারণ নিয়মটি হ'ল পপআপ ব্লকাররা যদি window.openজাভাস্ক্রিপ্ট থেকে সরাসরি অনুরোধ করা হয় যা সরাসরি ব্যবহারকারীর ক্রিয়া দ্বারা প্রেরণ করা হয় না তা জড়িত । অর্থাত্, window.openপপআপ ব্লকারের দ্বারা আঘাত না পেয়ে আপনি একটি বোতাম ক্লিকের জবাবে কল করতে পারেন , তবে আপনি যদি টাইমার ইভেন্টে একই কোডটি রাখেন তবে এটি ব্লক হয়ে যাবে। কল চেইনের গভীরতাও একটি ফ্যাক্টর - কিছু পুরানো ব্রাউজারগুলি কেবল তাত্ক্ষণিক কলারের দিকে নজর দেয়, নতুন ব্রাউজারগুলি কলারের কলারটি মাউস ক্লিক ছিল কিনা তা দেখতে কিছুটা ব্যাকট্র্যাক করতে পারে etc. পপআপ ব্লকারদের এড়াতে এটিকে যতটা সম্ভব অল্প অল্প করে রাখুন।


2
মজার বিষয় হল একটি নির্বাচিত উপাদানকে আবদ্ধ পরিবর্তনের ইভেন্টের মাধ্যমে শুরু করা পপআপগুলি ব্লকের হয়ে যাবে (ক্রোমে, এফএফ নয়), যদিও ইভেন্টটি ক্লিকের মতো প্রত্যক্ষ ব্যবহারকারী ক্রিয়াকলাপ দ্বারা সূচিত হয়েছিল। যদিও কোনও ইনপুটে আবদ্ধ থাকলেও তাদের অনুমতি দেওয়া হয়। স্ট্রেঞ্জ।
সিএনএনোকস

6
ব্রাউজারটি সামঞ্জস্যপূর্ণ বলে কেউ বলেনি। : পি
dthorpe

8
পরীক্ষাগুলির মাধ্যমে আমি বুঝতে পারি যে স্ট্যাকের গভীরতার পপআপ ব্লকারের সাথে কোনও সম্পর্ক নেই। এটি আসলে উইন্ডো.পেনকে ব্যবহারকারীর ক্রিয়া করার পরে 1 সেকেন্ডের মধ্যে কল করা হয়েছে কিনা তা যাচাই করে। ক্রোম 46 এবং ফায়ারফক্স 42-এ পরীক্ষা করা হয়েছে
মেস্কালিতো

এই পৃষ্ঠায় @ টিজে-কর্ডারের উত্তরটি ব্যবহার করে অনির্দিষ্টকালের জন্য অনুমতি দেওয়ার জন্য উভয় ব্রাউজারে 1 সেকেন্ড টাইমআউটটি নিষ্ক্রিয় করা যেতে পারে .. আপনি যে এজন্য অজ্যাক্সের মাধ্যমে কল করছেন সেই URL টি কিছু পিএইচপি (বা যাই হোক না কেন) যা ঘুম ব্যবহার করে ( ) এটির প্রতিক্রিয়া ফিরিয়ে দেওয়ার আগে বেশ কিছু সময়ের জন্য। পৃষ্ঠাটি 'লোড' করার সময় ব্রাউজারটি স্তব্ধ হয়ে যাবে .. তারপরে কোনও প্রতিক্রিয়া পেলে পপআপটি ট্রিগার করবে। ক্রোমে যদিও এই কৌশলটি কাজ করতে আপনাকে এজ্যাক্স () এর ঠিক আগে একটি সতর্কতা যুক্ত করতে হবে ()।
ধীরে

184

উপর ভিত্তি করে জেসন Sebring 's খুব দরকারী ডগা ও কাপড় উপর আচ্ছাদিত এখানে এবং সেখানে , আমি আমার ক্ষেত্রে জন্য একটি নির্ভুল সমাধান পাওয়া গেছে:

জাভাস্ক্রিপ্ট স্নিপেট সহ সিউডো কোড:

  1. অবিলম্বে ব্যবহারকারীর ক্রিয়াতে একটি ফাঁকা পপআপ তৈরি করুন

    var importantStuff = window.open('', '_blank');

    .চ্ছিক: কিছু "অপেক্ষারত" তথ্য বার্তা যুক্ত করুন। উদাহরণ:

    ক) একটি বাহ্যিক এইচটিএমএল পৃষ্ঠা: উপরের লাইনটি এর সাথে প্রতিস্থাপন করুন

    var importantStuff = window.open('http://example.com/waiting.html', '_blank');

    খ) পাঠ্য: উপরের একটির নীচে নিম্নলিখিত লাইনটি যুক্ত করুন:

    importantStuff.document.write('Loading preview...');
  2. প্রস্তুত হয়ে গেলে এটি সামগ্রীতে পূরণ করুন (উদাহরণস্বরূপ যখন এজেএক্স কলটি ফিরে আসে)

    importantStuff.location.href = 'http://shrib.com';

আপনার window.openঅতিরিক্ত অতিরিক্ত বিকল্পগুলির সাথে কলকে সমৃদ্ধ করুন।

আমি আসলে এই সমাধানটি একটি মেলটো পুনঃনির্দেশের জন্য ব্যবহার করি এবং এটি আমার সমস্ত ব্রাউজারগুলিতে (উইন্ডোজ,, অ্যান্ড্রয়েড) কাজ করে। _blankবিট মোবাইলে কাজ mailto পুনঃনির্দেশনার সাহায্য করে, BTW।

তোমার অভিজ্ঞতা? এর উন্নতি করার কোন উপায়?


1
? সুতরাং এটি ব্রাউজারে ব্যবহারকারীর অ্যাকশন থেকে না হলে আপনি কী করবেন? আমার উদাহরণস্বরূপ, ব্যবহারকারীর সার্ভারের বিরুদ্ধে প্রমাণীকরণের পরে, এটি অবশ্যই একটি নতুন ট্যাব খুলতে হবে
ডন চ্যাডল

@ মিমক্র্রে এটা করবেন না আপনি যা করতে চান তা যাই হোক না কেন, পপআপ উইন্ডোর চেয়ে আরও ভাল উপায়। অন্যথায়, সম্ভাবনা হ'ল আমি কখনই আপনার সাইটটি দেখতে চাই না। আজকের ব্রাউজারগুলি নিশ্চিত করে যে আপনি এটি করতে সক্ষম হবেন না - দেখুন @ ডিটারপের উত্তর
সুইস মিস্টার 20

5
Whatever it is you intend to do, there is a better way than a popup windowহাঃ হাঃ হাঃ? অদ্ভুত সাধারণীকরণ। ক্লায়েন্টটি খোলা থাকার জন্য তারা পৃষ্ঠাটি অনুমোদন করেছে এবং নতুন ট্যাবে খোলার জন্য প্রমাণীকরণের পরে নতুন সাইট / অবতরণ পৃষ্ঠাটি চাইবে। হ্যাঁ, দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা সম্পর্কে আমার ধারণা নয় ... তবে এটি যুক্তিসঙ্গত বলে মনে হচ্ছে
ডন চ্যাডল

@mmcrae। বসে বসে ভাবুন, গুরুত্ব সহকারে। আমি প্রতিশ্রুতি দিচ্ছি যে আপনি বর্ণিত দৃশ্যে আপনি একটি "ব্যবহারকারী অ্যাকশন" পেয়ে যাবেন। আমার উত্তরের পুরো বিষয়টি হ'ল আপনি যখন প্যাকআপ উইন্ডোটি তৈরি করেন তখন ব্যবহারকারী ক্রিয়া করেন - এবং তারপরে এটি পরে সামগ্রী দিয়ে পূরণ করুন। আপনার ক্ষেত্রে ইঙ্গিত: ব্যবহারকারী "প্রমাণীকরণ" -> পপআপ (খালি) তৈরি করে; টাইমার শেষ বা সার্ভারের প্রতিক্রিয়া ফিরে এসেছে বা যাই হোক না কেন -> সামগ্রীটি পপআপে পূরণ করুন।
সুইস মিস্টার 20

3
দরকারী টিপস, যদি এজাক্স অনুরোধটি ব্যর্থ importantStuff.closeহয় তবে নতুন ট্যাবটি বন্ধ করতে কল করুন এবং মূল পৃষ্ঠায় সরবরাহ করুন এবং সতর্ক করুন।
গুজ

24

এছাড়াও সুইস মিস্টার পোস্টে, আমার ক্ষেত্রে উইন্ডো.পেন একটি প্রতিশ্রুতির ভিতরে চালু হয়েছিল, যা পপআপ ব্লকার চালু করেছিল, আমার সমাধানটি ছিল: কৌণিক:

$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);
jonas

1
আপনি যদি পপআপ ব্লকার সক্ষম করে থাকেন তবে এটি পপআপ ব্লকারের সাথে সমস্যার সমাধান করবে না ...
আলেজান্দ্রো ওয়েলস

@ আলেজান্দ্রো ওয়েলস জোনাস সলিউশন কেবল তখনই কাজ করবে যদি কোডটি অনক্লিক ইভেন্ট বা কোনও ব্যবহারকারীর ইন্টারঅ্যাকশন থেকে চালিত হয়। আপনি যখন কোন প্রতিশ্রুতি, সময়সীমা, গ্রাহকত্বের ভিতরে উইন্ডোজ.ওপেনের মাধ্যমে একটি নতুন ট্যাব খোলার চেষ্টা করবেন তখন ব্রাউজারটি মনে করে এটি ব্যবহারকারীর উপর একটি হেরফের, তাই সমাধানটি প্রতিশ্রুতি প্রবেশের আগে একটি উদাহরণ তৈরি করা উচিত, আপনার ভিতরে কেবল পরিবর্তন জোনাসের মতো হারেফ করেছে
ডেভিড

@ ডেভিড আপনাকে অনেক ধন্যবাদ !!! .thenতারপরে আমি উত্তরটি দেখতে পাইনি এবং সে কারণেই আমি এত বিভ্রান্ত হয়ে পড়েছিলাম: / এসআরওয়াই ...
আলেজান্দ্রো ওয়েলস

@ ডেভিড এটি দুর্দান্ত! একটি যাদুমন্ত্র মত কাজ করে. যদি আমি আপনাকে আরও একটি প্রশ্ন দিয়ে বিরক্ত করতে পারি - আপনি কীভাবে এজতেও এই কাজটি করবেন তা জানেন? একটি সঠিক সংস্থার একটি
টোকা

21

একটি ভাল অনুশীলন হিসাবে আমি মনে করি কোনও পপআপ ব্লক করা হয়েছে কিনা তা পরীক্ষা করে নেওয়া এবং যদি ব্যবস্থা নেওয়া হয় তবে এটি ভাল ধারণা । আপনার জানা দরকার যে উইন্ডো.ওপেনের একটি রিটার্ন মান রয়েছে এবং অ্যাকশন ব্যর্থ হলে সেই মানটি শূন্য হতে পারে। উদাহরণস্বরূপ, নিম্নলিখিত কোডে:

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;
}

যদি পপআপ অবরুদ্ধ থাকে তবে উইন্ডো.পেন শূন্য হবে। সুতরাং ফাংশন মিথ্যা ফিরে আসবে।

উদাহরণস্বরূপ, এর সাথে কোনও লিঙ্ক থেকে সরাসরি এই ফাংশনটি কল করার কল্পনা করুন target="_blank": পপআপটি সফলভাবে খোলা থাকলে ফিরে falseআসা লিঙ্কটির ক্রিয়াটি ব্লক করে দেবে, অন্যথায় যদি পপআপ অবরুদ্ধ থাকে তবে ফিরে trueআসাটি ডিফল্ট আচরণকে (নতুন _ব্ল্যাঙ্ক উইন্ডো খুলুন) যেতে দেয় এবং চালিয়ে যায় ।

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

এইভাবে কাজ করে তবে আপনার পপআপ এবং যদি না হয় তবে একটি _ব্ল্যাঙ্ক উইন্ডো থাকবে।

যদি পপআপ না খোলায়, আপনি এটি করতে পারেন:

  • উদাহরণের মতো ফাঁকা উইন্ডোটি খুলুন এবং এগিয়ে যান
  • একটি জাল পপআপ খুলুন (পৃষ্ঠার ভিতরে একটি iframe)
  • ব্যবহারকারীকে অবহিত করুন ("দয়া করে এই সাইটের জন্য পপআপগুলি অনুমতি দিন")
  • একটি ফাঁকা উইন্ডো খুলুন এবং তারপরে ব্যবহারকারীকে অবহিত করুন ..

ধন্যবাদ. কাজ করছে!
Bcktr

8

গুগলের ওউথ জাভাস্ক্রিপ্ট এপিআই থেকে:

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

এটি যেখানে পড়েছে তা দেখুন:

প্রমাণীকরণ সেট আপ করা হচ্ছে

ক্লায়েন্টের OAuth 2.0 এর বাস্তবায়ন ব্যবহারকারীকে সাইন ইন করতে এবং অ্যাপ্লিকেশনটিকে অনুমোদনের অনুরোধ জানাতে একটি পপআপ উইন্ডো ব্যবহার করে। পাপআপ ব্লকারকে ট্রিগার করতে পারে গ্যাপী.আথ.অর্টিফাইজে প্রথম কল, কারণ এটি পরোক্ষভাবে পপআপ উইন্ডোটি খোলে। পপআপ ব্লকারকে অথথ কলগুলিতে ট্রিগার করা থেকে বিরত রাখতে, ক্লায়েন্ট লোড হওয়ার পরে কল করুন গিপি.আউথ.ইন.ইনাইট (কলব্যাক)। সরবরাহকৃত কলব্যাক কার্যকর করা হবে যখন লাইব্রেরি লেখক কল করার জন্য প্রস্তুত।

আমি এটির উপরে আসল উত্তরের সাথে সম্পর্কিত অনুমান করব যে এটি কীভাবে ব্যাখ্যা করে যদি তাত্ক্ষণিক প্রতিক্রিয়া হয় তবে এটি পপআপ অ্যালার্মটি ভ্রমণ করবে না। "Gapi.auth.init" এটি তৈরি করছে যাতে এপিআই ততক্ষনে ঘটে।

ব্যবহারিক প্রয়োগ

আমি এনপিএম নোড পাসপোর্ট এবং প্রতিটি সরবরাহকারীর জন্য বিভিন্ন পাসপোর্ট প্যাকেজ ব্যবহার করে একটি ওপেন সোর্স প্রমাণীকরণ মাইক্রোসার্চিস তৈরি করেছি। আমি তৃতীয় পক্ষের কাছে ফিরে আসতে পুনর্নির্দেশের URL প্রদানের জন্য একটি স্ট্যান্ডার্ড পুনর্নির্দেশ পদ্ধতির ব্যবহার করেছি। এটি প্রোগ্রামযুক্ত ছিল তাই লগইন / সাইনআপ এবং নির্দিষ্ট পৃষ্ঠাগুলিতে পুনঃনির্দেশের জন্য আমার কাছে বিভিন্ন স্থান থাকতে পারে।

github.com/sebringj/athu

passportjs.org


3

আমি একাধিক সমাধান চেষ্টা করেছিলাম, তবে তাঁর একমাত্র তিনিই সমস্ত ব্রাউজারে আমার পক্ষে কাজ করেছিলেন

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


2
এটি কেবল এমন লোকদের জন্যই কাজ করে না যা পপআপ ব্লকার সক্ষম করেছে
আলেজান্দ্রো ভেলস

কি url? এটি বরাদ্দ করা হয় না।
shinriyo

@ শিনারিও ইউআরএল আপনি যে পৃষ্ঠাটিতে অ্যাক্সেস করতে চান তার লিঙ্ক, উদাহরণস্বরূপhttp://example.com
pomobc ২

@ আলেজান্দ্রোভেলস আমার পপআপ ব্লকার সক্ষম করেছে এবং এটি কাজ করে। সমস্যাটি হ'ল window.open()প্রোগ্রামগুলি নতুন উইন্ডো খুলতে পারে না এবং যদি আমাদের প্রয়োজন হয় তবে উত্তরটি বিকল্পগুলির মধ্যে একটি। সঙ্গে newTabপরিবর্তনশীল আমরা রেফারেন্স করা window.open()এবং পরে আমরা, এটা কল করতে পারেন সন্নিবেশ urlআমরা প্রয়োজন, কিছু ফোঁটা আমার ক্ষেত্রে URL- এ, এবং নতুন ট্যাব প্রবেশ URL সঙ্গে খোলা হবে।
stanimirsp

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);
  });
}

3
ক্রোম 62 এ আমার জন্য কাজ করে না Pop পপআপ (পৃষ্ঠা) ব্লক হয়ে যায়।
s.ermakovich

1
হ্যাঁ আপনি ঠিক বলেছেন - আমি এটি বেমানান বলেও খুঁজে পেয়েছি। আমি আমার এপিআই কলকে সিঙ্ক্রোনাস করে শেষ করেছি
ব্যবহারকারী 3479425

-8

এ থেকে মুক্তি পাওয়ার সহজতম উপায় হ'ল:

  1. ডকুমেন্ট.ওপেন () ব্যবহার করবেন না।
  2. পরিবর্তে this.docament.location.href = অবস্থান ব্যবহার করুন; যেখানে অবস্থানটি লোড করা url be

প্রাক্তন:

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

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

এটি আমার পক্ষে খুব ভাল কাজ করেছে। চিয়ার্স


2
নতুন ট্যাবে ইউআরএল খুলতে হবে?
3 বিধি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.