ইউআরএল হ্যাশ অবস্থান পাওয়া এবং এটি jQuery এ ব্যবহার করা


135

আমি বর্তমান পৃষ্ঠার ইউআরএলে একটি হ্যাশের পরে মানটি পেতে চাই এবং তারপরে এটি একটি নতুন ফাংশনে প্রয়োগ করতে সক্ষম হব ... উদাহরণস্বরূপ।

ইউআরএল হতে পারে

www.example.com/index.html#foo

এবং আমি নিম্নলিখিত কোডের টুকরাটির সাথে মিলিয়ে এটি ব্যবহার করতে চাই

$('ul#foo:first').show();

আমি কিন্ত ধরে নিচ্ছি / আশা করছি এটি ধরার কোনও উপায় আছে এবং এটিকে ভেরিয়েবলে পরিণত করে যা আমি তারপরে কোডের দ্বিতীয় অংশে ব্যবহার করতে পারি।


8
আপনার জন্য আমার কাছে কোনও কোড নেই তবে আপনার কোডটি ইনজেকশনের জন্য পাকা বলে মনে হচ্ছে আপনার ইনপুটটি স্যানিটাইজ করা নিশ্চিত করা উচিত।
নট বি

এই প্রশ্নটি প্রায় এক দশক পুরানো, 'ul#foo:first'তা বোঝার কোনও অর্থ নেই যেহেতু আইডি অবশ্যই অনন্য হওয়া উচিত , তাই :firstনির্বাচককে যুক্ত করা অপ্রয়োজনীয়, যদি না আপনি আইডি নকল করছেন যা অবৈধ। মনে রাখবেন যে এক দশক আগেও, পুনরাবৃত্তি আইডিগুলি এখনও অবৈধ ছিল।
j08691

এখনও এক দশক আগে ভুল ছিল
ডগলাস

উত্তর:


280

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

আপনি location.hashবর্তমান পৃষ্ঠার হ্যাশ দখল করতে সম্পত্তিটি ব্যবহার করতে পারেন :

var hash = window.location.hash;
$('ul'+hash+':first').show();

মনে রাখবেন যে এই সম্পত্তিটিতে ইতিমধ্যে #শুরুতে প্রতীক রয়েছে ।

আসলে আপনি :firstসিউডো-সিলেক্টরের দরকার নেই যেহেতু আপনি আইডি সিলেক্টরটি ব্যবহার করছেন , ধরে নেওয়া হয় যে আইডিগুলি ডিওএম-এর মধ্যে স্বতন্ত্র

আপনি যদি কোনও URL স্ট্রিং থেকে হ্যাশ পেতে চান তবে আপনি এই String.substringপদ্ধতিটি ব্যবহার করতে পারেন :

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

পরামর্শ: সচেতন থাকুন যে ব্যবহারকারী হ্যাশটি যেমন ইচ্ছা তেমন পরিবর্তন করতে পারে, আপনার নির্বাচককে যে কোনও কিছু ইনজেকশনের মাধ্যমে ব্যবহার করার আগে আপনার হ্যাশটি পরীক্ষা করা উচিত।


30
নোট করুন যে jQuery নির্বাচনকারীদের কাস্টম জাভাস্ক্রিপ্ট কোড কার্যকর করতে ব্যবহার করা যেতে পারে, তাই অযৌক্তিক হ্যাশগুলি ব্যবহার করা ভয়াবহভাবে, ভয়াবহভাবে নিরাপত্তাহীন। নির্বাচকদের জন্য সাম্প্রতিক jQuery সংস্করণগুলিতে এটির জন্য একটি অর্ধ-অ্যাস্কড ফিক্স রয়েছে যা ইনজেকশনের কোডের আগে একটি # থাকে তবে আপনি অবস্থান.হ্যাশের শুরু থেকে # চিহ্ন সরিয়ে ফেললে আপনি এখনও ঝুঁকির মধ্যে রয়েছেন। E. g। var hash = location.hash.slice(1); $('ul.item'+hash).show().append($('#content'));এটি হ্যাশে রাখা স্ক্রিপ্ট ট্যাগ কার্যকর করবে। $('body').find('ul'+hash+':first')পরিবর্তে এটি ব্যবহার করা ভাল অভ্যাস $('ul'+hash+':first')
টিজিআর

40
কিছু ব্রাউজার হ্যাশ প্রতীক ফিরিয়ে দেয়, এবং কিছু না দেয়, তাই এটি ব্যবহার করা নিরাপদ:var hash = location.hash.replace('#', '');
টিম

12
অ্যালিস একটি ওয়েব সাইট চালায়, বব এটি পরিদর্শন করেছেন, সত্যতা দেয় এবং একটি সেশন কুকি গ্রহণ করে। (কিছু সময় এখানে কেটে যেতে পারে, বব এমনকি তার ব্রাউজারটি বন্ধ করতে পারে)) চার্লি ববকে "এই দুর্দান্ত লিঙ্কটি পরীক্ষা করে দেখুন!" বলে মেল পাঠায়। বব লিঙ্কটি খুললেন, যা চার্লি দ্বারা নিয়ন্ত্রিত কোনও সাইটের দিকে নিয়ে যায়। পৃষ্ঠাটি হ্যাশে আক্রমণে পেডলোড সহ অ্যালিসের সাইটের কোনও পৃষ্ঠায় বব ব্রাউজারকে পুনঃনির্দেশ করে। পে-লোড কার্যকর করা হয়েছে, এবং যেহেতু ব্রাউজারটি এখনও কুকিগুলি মনে রাখে, তাই এটি কেবল চার্লিকে প্রেরণ করতে পারে।
Tgr

2
@ টিজিআর, বিন্দুগুলি বিশদভাবে সংযুক্ত করার জন্য এবং আপনাকে ধন্যবাদ জানাতে ধন্যবাদ। এই দৃ concrete় উদাহরণটি আমাকে (এবং আশা করি অন্যরা) জিনিসগুলিকে সুরক্ষিত রাখার ক্ষেত্রে সজাগতার দিকে আরও ঝুঁকে পড়েছে।
স্ন্যাপফ্র্যাক্টলপপ

2
@ বাফার: $(userInput)সাধারণভাবে অনিরাপদ কারণ ওভারলোডড $এবং এটি হয় বিদ্যমান নোডগুলি অনুসন্ধান করতে পারে বা স্ট্রিংয়ে <>অক্ষর রয়েছে কিনা তার উপর নির্ভর করে নতুন তৈরি করতে পারে । $(document).find(userInput)সর্বদা বিদ্যমান নোডগুলির জন্য অনুসন্ধান করবে যাতে এটি কম অনিরাপদ। এটি বলেছিল, সর্বোত্তম অনুশীলন হ'ল ব্যবহারকারীর ইনপুটটি সর্বদা স্যানিটাইজ করা, যেমন আপনি যদি আলফানামুরিক আইড ব্যবহার করেন তা নিশ্চিত করে নিন যে এটি আলফানিউমেরিক।
টিজিআর

35

অবস্থান.hash আইই এর জন্য নিরাপদ নয় , আইই এর ক্ষেত্রে (আইই 9 সহ) যদি আপনার পৃষ্ঠায় যদি আইফ্রেমে থাকে তবে ম্যানুয়াল রিফ্রেশের পরে যদি আইফ্রেমে সামগ্রীতে স্থান পাওয়া যায় তবে হ্যাশ মানটি পুরানো (প্রথম পৃষ্ঠার লোডের মান)। ম্যানুয়াল পুনরুদ্ধারকৃত মানটি অবস্থানের তুলনায় আলাদা। তাই ডকুমেন্টের মাধ্যমে সর্বদা এটি পুনরুদ্ধার করুন URL URL

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

7
আপডেট: ডকুমেন্ট.ইউআরএল ফায়ারফক্স 3.6 এ হ্যাশ মান ধারণ করে না তাই অবস্থানের শৃঙ্খলাবদ্ধ নিরাপদ var হ্যাশ = লোকেশন href.substr (লোকেশন href.indexOf ('#') + 1)
দীপক পাতিল

4

যারা খাঁটি জাভাস্ক্রিপ্ট সমাধান খুঁজছেন তাদের জন্য

 document.getElementById(location.hash.substring(1)).style.display = 'block'

আশা করি এটি আপনার কিছুটা সময় সাশ্রয় করবে।


3

JQuery 1.9 থেকে, :targetনির্বাচকটি ইউআরএল হ্যাশের সাথে মিলবে। সুতরাং আপনি করতে পারেন:

$(":target").show(); // or $("ul:target").show();

যা আইশটির সাথে হ্যাশের সাথে মিল রেখে উপাদানটি নির্বাচন করে এটি প্রদর্শন করবে।


ম্যাচের আইডির পরিবর্তে স্ট্রিং হিসাবে হ্যাশটি বের করার কোনও উপায় আছে কি?
আইএনএ

@ina আপনি কী jQuery এর :targetস্ট্রিং হিসাবে হ্যাশ পেতে চান ? যদি তাই হয় তবে আমি বিশ্বাস করি না।
j08691

1

বর্তমান পৃষ্ঠায় একটি হ্যাশ থাকলে আমি প্রথমে আরও ভাল সিএকে পরামর্শ দেব। অন্যথায় এটি হবে undefined

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

1

আমি @ সিএমএসের উত্তরে উল্লিখিত সুরক্ষা সম্পর্কিত সমস্যার সমাধান করতে এটি ব্যবহার করছি।

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.