অন ​​- উইন্ডো.লোকেশন.হ্যাশ - পরিবর্তন?


558

আমি নেভিগেশনের জন্য অ্যাজাক্স এবং হ্যাশ ব্যবহার করছি।

এইভাবে window.location.hashপরিবর্তন হয়েছে কিনা তা যাচাই করার কোনও উপায় আছে ?

http://example.com/blah # 123 থেকে http://example.com/blah # 456

ডকুমেন্টটি লোড হওয়ার পরে এটি পরীক্ষা করে নিলে এটি কাজ করে।

তবে আমার যদি # হ্যাশ ভিত্তিক নেভিগেশন থাকে তবে আমি ব্রাউজারে পিছনের বোতামটি টিপলে এটি কার্যকর হয় না (সুতরাং আমি ব্লেহ # 456 থেকে ব্লাহ # 123 তে লাফিয়ে উঠি)।

এটি ঠিকানা বাক্সের ভিতরে দেখায়, তবে আমি এটি জাভাস্ক্রিপ্টের সাহায্যে ধরতে পারি না।


6
এই jquery প্লাগইনটি চেকআউট করুন: github.com/cowboy/jquery-hashchange
জাভি

9
ইতিহাস .js এইচটিএমএল 5 স্টেট ম্যানেজমেন্ট কার্যকারিতা সমর্থন করে (যাতে আপনার আর হ্যাশ ব্যবহার করার দরকার নেই!) এবং হ্যাশচ্যান্সগুলি ব্যবহার করে এইচটিএমএল 4 ব্রাউজারগুলিতে কৃত্রিমভাবে এটিকে হ্রাস করে। এটি বাক্সের বাইরে jQuery, MooTools এবং প্রোটোটাইপ সমর্থন করে।
বালুপটন

@ বালুপটন, বাস্তবে আমাদের ব্যবহারকারীর প্রতিক্রিয়া জানাতে হ্যাশগুলি ব্যবহার করা দরকার যা "ইতিহাস" তার ইতিহাসে intoোকানো হয়েছে, যদি না আপনি প্রতিক্রিয়া হিসাবে ইউআরএল-পরিবর্তন ব্যবহার না করেন।
পেসারিয়ার


হুম ... আমার মনে হয় আপনি moar প্রয়োজন jQuery এর
RaisingAgent

উত্তর:


616

এটি করার একমাত্র উপায় (এবং কীভাবে 'প্রকৃতপক্ষে সিম্পলহিস্টিরি এটি করে') হ'ল একটি অন্তর স্থাপন করে যা বর্তমান হ্যাশ পরীক্ষা করে চালিয়ে যায় এবং এর আগে যা ছিল তার তুলনা করে আমরা এটি করি এবং গ্রাহকরা পরিবর্তিত হয়ে সাবস্ক্রাইব করতে দিন ইভেন্টটি হ্যাশ পরিবর্তিত হলে আমরা গুলি চালাই .. এটি নিখুঁত নয় তবে ব্রাউজারগুলি সত্যই স্থানীয়ভাবে এই ইভেন্টটিকে সমর্থন করে না।


এই উত্তর টাটকা রাখতে আপডেট করুন:

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

$(window).on('hashchange', function() {
  //.. work ..
});

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

এই বৈশিষ্ট্যটির সাহায্যে আপনি মূলত কোনও ইভেন্টের জন্য কিছু সেটআপ কোড চালাবেন, প্রথমবারের মতো কেউ কোনওভাবে ইভেন্টটি ব্যবহার করার চেষ্টা করবেন (যেমন ইভেন্টের সাথে বাঁধাই করা)।

এই সেটআপ কোডটিতে আপনি নেটিভ ব্রাউজার সমর্থন পরীক্ষা করতে পারেন এবং যদি ব্রাউজারটি স্থানীয়ভাবে এটি প্রয়োগ না করে, আপনি পরিবর্তনের জন্য পোল দেওয়ার জন্য একটি একক টাইমার সেটআপ করতে পারেন এবং jQuery ইভেন্টটি ট্রিগার করতে পারেন।

এটি আপনার কোডটিকে এই সমর্থন সমস্যাটি বোঝার প্রয়োজন থেকে সম্পূর্ণভাবে আবদ্ধ করে দেয়, এই জাতীয় বিশেষ ইভেন্টের বাস্তবায়ন তুচ্ছ (একটি সাধারণ 98% কার্যকরী সংস্করণ পেতে) তবে অন্য কারও কাছে ইতিমধ্যে থাকলে কেন এটি করবেন ।


7
আইই 8 করেন। আরও আসতে হবে
সের্গেই ইলিনস্কি

28
সর্বশেষতম ফায়ারফক্স বিল্ড (৩.6 আলফা) এখন দেশীয় হ্যাশ পরিবর্তিত ইভেন্টকে সমর্থন করে: ডেভেলপার.মোজিলা.আর.ইন / ডোম / উইন্ডো.অনহ্যাশচেঞ্জ এটি অবশ্যই এই ইভেন্টটির জন্য একটি চেক করা উপযুক্ত, তবে নোট করুন যে আইই 8 আপনাকে ইভেন্টটি বলবে আইই 7 কম্প্যাট মোডে চলাকালীন এটি উপস্থিত রয়েছে .. দু: খজনকভাবে ঘটনাটি আগুন দেয় না .. আপনাকে ইভেন্টটি পরীক্ষা করতে হবে এবং ব্রাউজারটি আই 7 নেই বলে মনে হচ্ছে .. দীর্ঘশ্বাস (অথবা ইভেন্টটি ট্রিগার করার চেষ্টা করা হবে) IE এর ফায়ারভেন্ট পদ্ধতি সহ)।
meandmycode

8
লেখার সময়, ওয়েবকিট hashchangeইভেন্টে গুলি চালায় , যখন সাফারি (স্থিতিশীল) এখনও করেনি।
ঝোলস্টার

51
আর একটি আপডেট যুক্ত করার জন্য, hashchangeইভেন্টটি এখন ব্যাপকভাবে সমর্থিত: caniuse.com/#search=hash
পাইস্টে

19
আমি কি একমাত্র যিনি ভাবেন অবিকৃত jQuery উত্তরগুলি ব্যথা?
লুক

290

এইচটিএমএল 5 একটি hashchangeইভেন্ট নির্দিষ্ট করে । এই ইভেন্টটি এখন সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত । সমর্থন নিম্নলিখিত ব্রাউজার সংস্করণে যুক্ত করা হয়েছিল:

  • ইন্টারনেট এক্সপ্লোরার 8
  • ফায়ারফক্স 3.6
  • ক্রোম 5
  • সাফারি 5
  • অপেরা 10.6

20
আপডেট: এফএফ 5, সাফারি 5, এবং ক্রোম 12 জুন 2011 হিসাবে এই ইভেন্টটিকে সমর্থন করে
james.garriss

2
হ্যাশচেঞ্জের জন্য এখানে CanIUse পৃষ্ঠাটি রয়েছে । এখানে quirksmode নেভিগেশন হ্যাশচেঞ্জ আছে । আইই সমর্থন সমর্থন সংবেদনশীলতার সাথে বগী।
টুবু

3
@ প্রত্যেকেই, মন্তব্য বিভাগে উত্তরের সাথে যুক্ত করার দরকার নেই - "সম্পাদনা" বোতামটি এটাই। :)
মাইকেল মার্টিন-স্মুকার

15
ব্যবহার:window.onhashchange = function() { doYourStuff(); }
ক্রিস

4
হ্যাশচেঞ্জ ইভেন্টের এমডিএন ডকুমেন্টেশন ।
ডাবোহিল

52

নোট করুন যে ইন্টারনেট এক্সপ্লোরার 7 এবং ইন্টারনেট এক্সপ্লোরার 9 এর ক্ষেত্রে ifস্ট্যাটমেন্টটি সত্য দিবে (উইন্ডোজগুলিতে "অন্যাশচেঞ্জ" এর জন্য) তবে এটি window.onhashchangeকখনই জ্বলে না ইন্টারনেট এক্সপ্লোরারের সমস্ত সংস্করণের জন্য।

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

সম্পাদনা - যেহেতু jQuery 1.9 $.browser.msieসমর্থিত নয়। সূত্র: http://api.jquery.com/jquery.browser/


14

আইই ব্রাউজারগুলিতে ইতিহাস এবং উইন্ডো.লোকেশন.হ্যাশ নিয়ে কাজ করার জন্য অনেক কৌশল রয়েছে:

  • যেমন আসল প্রশ্নটি বলেছে, আপনি যদি পৃষ্ঠা a.html # বি থেকে শুরু করে এইচটিএমএল # সি তে যান এবং তারপরে পিছনে বোতামটি চাপেন তবে ব্রাউজারটি জানে না যে পৃষ্ঠাটি পরিবর্তন হয়েছে। আমি এটি একটি উদাহরণ দিয়ে বলি: উইন্ডো.লোকেশন.ইরেফ 'a.html # সি' হবে, আপনি এএইচটিএমএল # বি বা এচটিএমটিএল # সি তে কোনও ব্যাপার না।

  • আসলে, এইচটিএমএল # বি এবং এইচটিএমএল # সি কেবলমাত্র ইতিহাসে সংরক্ষণ করা হয় যদি উপাদানগুলির <a name="#b"> 'এবং' <a name="#c"> 'পৃষ্ঠায় আগে উপস্থিত থাকে exists

  • তবে আপনি যদি কোনও পৃষ্ঠার ভিতরে একটি আইফ্রেম রাখেন, তবে সেই আইফ্রেমে এএইচটিএমএল # বি থেকে এচটিএমএল # সিতে নেভিগেট করুন এবং তারপরে পিছনে বোতামটি চাপুন, iframe.contentWindow.docament.location.href আশানুরূপ পরিবর্তন হয়।

  • আপনি যদি আপনার কোডটিতে 'ডকুমেন্ট.ডোমেন = কিছু ' ব্যবহার করেন তবে আপনি iframe.contentWindow.docament.open () 'তে অ্যাক্সেস করতে পারবেন না (এবং অনেক ইতিহাস পরিচালকরা তা করেন)

আমি জানি এটি সত্যিকারের প্রতিক্রিয়া নয়, তবে আইই-হিস্ট্রি নোটগুলি কারও পক্ষে কার্যকর।



11

এটি মোকাবেলার জন্য বেন আলমানের একটি দুর্দান্ত jQuery প্লাগইন রয়েছে: http://benalman.com / প্রকল্পগুলি :

আপনি যদি jQuery ব্যবহার না করেন তবে এটি বিচ্ছুরণের জন্য একটি আকর্ষণীয় উল্লেখ হতে পারে।


বেন আলমান প্লাগইনটি আর রক্ষণাবেক্ষণ করা হবে না বলে মনে হচ্ছে। যদিও কাঁটাচামচ একটি সংখ্যা আছে।
Mnebuerquo

9

আপনি "উইন্ডো.লোকেশন" অবজেক্টের "হ্যাশ" বৈশিষ্ট্যে সহজেই একটি পর্যবেক্ষক ("দেখুন" পদ্ধতি) প্রয়োগ করতে পারেন।

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

কোডটি এর মতো দেখাবে:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

তারপরে আপনি এটি পরীক্ষা করতে পারেন:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

এবং অবশ্যই এটি আপনার পর্যবেক্ষকদের ক্রিয়াকে ট্রিগার করবে।


আরও ভাল ব্যবহার: উইন্ডো.লোকেশনের পরিবর্তে উইন্ডো.লোকেশন হ'রেফ।
কোডবিট

3
সে উইন্ডো.লোকেশন.হ্যাশ দেখছে, উইন্ডো.লোকশন নয়।
undefined

1
@ ব্রায়ান মর্টেনসন: ডক্স অনুসারে ( বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / জাভা স্ক্রিপ্ট / রেফারেন্স /… ) আপনাকে অবশ্যই watchসেই অবজেক্টের জন্য আবেদন করতে হবে যা পরিবর্তিত হয়ে থাকা সম্পত্তিটির মালিক এবং আপনি এটি পর্যবেক্ষণ করতে চান।
gion_13

@ gion_13 হ্যাঁ, আমি ঠিক এটিই নির্দেশ করার চেষ্টা করছিলাম। 'তিনি' দ্বারা আমি আপনাকে বোঝাতে চেয়েছিলাম, এবং এটি এরভিনাসের মন্তব্যে পরিচালিত হয়েছিল। আমার আরো স্পষ্ট করা উচিত। আপনার স্পষ্টী মন্তব্য করার জন্য ধন্যবাদ।
undefined

7

ব্যবহারকারী কী দেখছেন তার উপর নির্ভর করে ইউআরএল প্রদর্শনকে বিভিন্ন পরামিতি তৈরি করতে আমি প্রতিক্রিয়া প্রয়োগে এটি ব্যবহার করছিলাম।

আমি হ্যাশ প্যারামিটার ব্যবহার করে দেখেছি

window.addEventListener('hashchange', doSomethingWithChangeFunction());

তারপর

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

ট্রিট কাজ করেছেন, সামনের দিকে এবং পিছনে ব্রাউজার বোতামগুলির সাথে এবং ব্রাউজারের ইতিহাসেও কাজ করে।


1
আপনার addEventListenerকল, আপনি মুছে ফেলা আবশ্যক ()থেকেdoSomethingWithChangeFunction
জেসন এস

আপনি () অপসারণের জন্য কোনও কারণ সরবরাহ করতে পারেন? আমি জানি যে এটির সাথেও কাজ করবে, এবং কম কোড বেশিরভাগ ক্ষেত্রেই সর্বোত্তম বিকল্প, তবে এটি ব্যাক আপ করার যথেষ্ট কারণ না থাকলে এটি পিক বলে মনে হচ্ছে?
স্প্রোজ

6
? এটি সঙ্গে কাজ করা উচিত নয় ()addEventListenerফাংশন একটি ফাংশন মধ্যে পাস করতে হবে। doSomethingWithChangeFunctionএকটি ফাংশন। doSomethingWithChangeFunction()এই ফাংশনের রিটার্ন মান, যা এই ক্ষেত্রে কোনও ফাংশন নয়।
জেসন এস

6

একটি শালীন বাস্তবায়ন http://code.google.com/p/reallysimplehistory/ এ পাওয়া যাবে । এটি কেবল (তবে এটির) সমস্যা এবং বাগটি হ'ল: ইন্টারনেট এক্সপ্লোরারটিতে লোকেশন হ্যাশটি ম্যানুয়ালি সংশোধন করা পুরো ইতিহাসের স্ট্যাকটি পুনরায় সেট করবে (এটি একটি ব্রাউজার সমস্যা এবং এটি সমাধান করা যায় না)।

দ্রষ্টব্য, ইন্টারনেট এক্সপ্লোরার 8-এর "হ্যাশচেঞ্জ" ইভেন্টটির জন্য সমর্থন রয়েছে এবং যেহেতু এটি এইচটিএমএল 5 এর অংশ হয়ে উঠছে আপনি অন্যান্য ব্রাউজারগুলি আশা করতে পারেন।


1

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

পাশাপাশি লক্ষণীয় আরেকটি প্রকল্প হ'ল jQuery Ajaxy যা jQuery ইতিহাসের মিশ্রণে অজ্যাক্স যুক্ত করার জন্য প্রসারিত। আপনি যখন হ্যাশগুলির সাথে এজাক্স ব্যবহার শুরু করেন এটি বেশ জটিল হয়ে যায় !


1
var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

এটাই ... এখন, আপনি যখনই আপনার পিছনে বা ফরোয়ার্ড বোতামগুলিতে আঘাত করবেন তখন পৃষ্ঠাটি নতুন হ্যাশ মান অনুসারে পুনরায় লোড হবে।


ইভাল স্ট্রিং ব্যবহার করবেন না
ভিটিম.ইস

1

আমি আমার ক্লায়েন্টের পাশের রাউটিংয়ের জন্য path.js ব্যবহার করছি। আমি এটি বেশ সংক্ষিপ্ত এবং হালকা ওজন হিসাবে পেয়েছি (এটি এনপিএম-তেও প্রকাশিত হয়েছে), এবং হ্যাশ ভিত্তিক নেভিগেশন ব্যবহার করে।

path.js এনপিএম

path.js গিটহাব


0

আমি একটি জিকুয়ারি প্লাগইন, হুটিল ব্যবহার করেছি এবং এর উপরে ইন্টারফেসের মতো একটি YUI ইতিহাস লিখেছি ।

একবার এটি পরীক্ষা করে দেখুন। আপনার যদি সাহায্যের প্রয়োজন হয় তবে আমি সহায়তা করতে পারি।

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