আপনি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি ইউআরএলে একটি # হ্যাশ পরীক্ষা করতে পারেন?


783

আমার কাছে কিছু jQuery / জাভাস্ক্রিপ্ট কোড রয়েছে যা আমি কেবল তখনই চালাতে চাই যখন #কোনও ইউআরএলে হ্যাশ ( ) অ্যাঙ্কর লিঙ্ক থাকে। আপনি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এই চরিত্রটি পরীক্ষা করতে পারেন? আমার একটি সাধারণ ক্যাচ-অল পরীক্ষা দরকার যা এই জাতীয় URL গুলি সনাক্ত করতে পারে:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

মূলত এর লাইনের সাথে কিছু:

if (thereIsAHashInTheUrl) {        
    do this;
} else {
    do this;
}

যদি কেউ আমাকে সঠিক দিকে নির্দেশ করতে পারে তবে তা প্রশংসিত হবে।

উত্তর:


1403

সরল:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

42
অতিরিক্ত: .location অবজেক্টটি কেবলমাত্র বর্তমান উইন্ডোটির ইউআরএলে উপলভ্য, আপনি এটি করতে পারবেন না যথেচ্ছ ইউআরএল (উদাহরণস্বরূপ স্ট্রিং ভেরিয়েবলের মধ্যে একটি)
গ্যারেথ

64
এছাড়াও, হ্যাশ এবং কোয়েরির মতো অবস্থানের বৈশিষ্ট্য <a> উপাদানগুলিতেও পাওয়া যায়
গ্যারেথ

19
.searchএকটি এ উপলব্ধ <a>, না .query। নমুনা JQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0].hash => "#fragmenttest"এবং .search= ?qs=1। সেখান থেকে, স্ট্রিং ব্যতীত অন্য কিছু পেতে ক্যোরিস্ট্রিংয়ের নিষ্কাশন প্রশ্নটি হিট করুন ।
পৃষ্ঠপোষক

1
@ হাইটাডোডস্ট্রাক্ট: এই প্রশ্নটি হ্যাশের পরিবর্তনের বিষয়ে নয়, কেবলমাত্র পৃষ্ঠা লোডে উপস্থিত কিনা তা নয়।
গ্যারেথ

2
@ গ্যারেথ হ্যাঁ, আপনি ঠিক বলেছেন। ঠিক বুঝতে পেরেছি যে আমি পোস্ট করা লিংকটি hashchangeইভেন্টটির জন্য এবং না window.location.hash। যদিও পরবর্তীকর্তা আইই <8 দ্বারা সমর্থিত নয়
হিটটোডস্ট্রাকচার

333
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

54

নিম্নলিখিত রাখুন:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

1
ধন্যবাদ, উইন্ডো.লোকেশন.হ্যাশের কেবলমাত্র একটি মান রয়েছে যদি # টি অনুসরণ করে কোনও মান থাকে। উদাহরণ স্বরূপ. //www.example.com# হ্যাশ চেক করার সময় '' ফেরত দেয়।
জেসি

33

যদি ইউআরআই নথির অবস্থান না হয় তবে এই স্নিপেটটি যা চান তা করবে।

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

জাভাস্ক্রিপ্টের জন্য +1 সীমার বাইরে কী তা জেনে নেই :)
ডানক

2
@ ডানক: আচ্ছা জেএস অ্যারেগুলি মূলত অবজেক্ট। তাদের সূচক দ্বারা অ্যাক্সেস করা তাই মত একটি বস্তু সম্পত্তি অ্যাক্সেস মত হল: obj['0']। জেএসে এটি সত্য: arr[0] === arr['0']অতএব যদি সূচক / কী বিদ্যমান না থাকে তবে ফেরত মান সীমা ছাড়াই পরিবর্তিত হয় ef jsfiddle.net/web5me/Mw376
মার্ক

21

আপনি কি এই চেষ্টা করেছেন?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

( urlআপনি যে URL টি দেখতে চান তা স্পষ্টতই কোথায় ।)


17
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

এটি সমস্যার সমাধান করবে;)


ইতিমধ্যে জেএস + জিকিউ, ক্রস ব্রাউজার এবং সহজ সমাধান মিশ্রণের এই উত্তর কোজ পছন্দ করেছে, ইতিমধ্যে এই পদ্ধতির প্রয়োগ করেছে।
আর্থার কুশমান

13
window.location.hash 

হ্যাশ শনাক্তকারীকে ফিরিয়ে দেবে


সংক্ষিপ্ত এবং পরিষ্কার, নিখুঁত
জাম


6

হ্যাশ পরিবর্তনের জন্য আপনি পর্যায়ক্রমে যা যা করতে পারেন তা এখানে দেখুন এবং তারপরে হ্যাশ মানটি প্রক্রিয়া করার জন্য একটি ফাংশন কল করুন।

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

11
না না শুধুমাত্র IE 6 + + 7. আল অন্যান্য ব্রাউজারে nessesary onhashchange ঘটনা অন্তর্ভুক্ত করেছেন
Tokimon

@ টোকিমন - দুর্দান্ত! আমি এটা জানতাম না। তবে আমি অনুমান করি যে আমরা এখনও IE- র পুরানো সংস্করণগুলি সমর্থন করতে পেরেছি
এমমানুয়েল

1
হ্যাঁ দুঃখের বিষয় ... এমনকি আই 8 8 এক্সপি তে সমর্থিত না হওয়ায় শীঘ্রই চলে যাবে :(
টোকিমন

1
আধুনিকীকরণ.কম ডটকম পুরানো ব্রাউজারগুলিতে (অন্যান্য আধুনিক বৈশিষ্ট্যগুলির একটি গোছা সহ) হ্যাশইচিং ইভেন্টটি প্রয়োগ করে
গিগুজ

4
এই সব সময়ে একটি প্রস্তাবিত কোড নয়: এটা অন্তত হওয়া উচিত: setTimeout(checkHash, 400)। এছাড়াও, আধুনিক ব্রাউজারগুলিতে hashchangeইভেন্ট রয়েছে যাতে আপনি একটি করতে পারেন window.addEventListener('hashchange', function(){ … })। অবশেষে, বৈশ্বিক hashপরিবর্তনশীল ফাঁস করা আরও একটি অ-প্রস্তাবিত অনুশীলন, এমনকি একটি উদাহরণ হিসাবে।
ওঙ্কল টম

5

ডকুমেন্ট.লোকেশনে ইউআরএল বৈশিষ্ট্য সম্পর্কে বেশিরভাগ লোক সচেতন। আপনি যদি কেবলমাত্র বর্তমান পৃষ্ঠায় আগ্রহী হন তবে তা দুর্দান্ত। তবে প্রশ্নটি কোনও পৃষ্ঠায় নোঙ্গরগুলি পার্স করতে সক্ষম হচ্ছিল।

বেশিরভাগ লোকেরা যা মিস করে বলে মনে হচ্ছে তা হল সেই একই URL টি বৈশিষ্ট্যগুলি অ্যাঙ্কর উপাদানগুলিতেও উপলভ্য:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

3
"হ্যাশ.লেন্থ ()" এর বিপরীতে "হ্যাশ.লেন্থ" হওয়া উচিত না? :)
নাথান পিটম্যান


3

উপরের অংশীদার এবং গ্যারেথ মন্তব্য দুর্দান্ত। তারা পৃথক উত্তর প্রাপ্য। স্পষ্টতই, হ্যাশ এবং অনুসন্ধানের বৈশিষ্ট্যগুলি কোনও এইচটিএমএল লিঙ্ক অবজেক্টে উপলব্ধ:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

অথবা

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

আপনার যদি নিয়মিত স্ট্রিং ভেরিয়েবলের প্রয়োজন হয় এবং চারদিকে জিকুয়েরি ঘটে থাকে তবে এটি কাজ করা উচিত:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(তবে এটি কিছুটা ওভারডোন হতে পারে ..)


3

স্বেচ্ছাসেবী ইউআরআই-এর মতো স্ট্রিং থেকে অবস্থানের বৈশিষ্ট্য বিমূর্ত করার পদ্ধতি হিসাবে এটি এখানে ছুঁড়ে দেওয়া। যদিও window.location instanceof Locationসত্য, অনুরোধের Locationযে কোনও প্রচেষ্টা আপনাকে বলবে যে এটি একটি অবৈধ নির্মাণকারী। আপনি এখনও ভালো জিনিস পেতে পারেন hash, query, protocolহিসাবে আপনার স্ট্রিং সেট করে ইত্যাদি hrefএকটি DOM নোঙ্গর উপাদান, যা দিয়ে সমস্ত ঠিকানা বৈশিষ্ট্য ভাগ করবে সম্পত্তির window.location

এটি করার সহজ উপায়:

var a = document.createElement('a');
a.href = string;

string.hash;

সুবিধার জন্য, আমি একটি ছোট লাইব্রেরি লিখেছি যা এটি ব্যবহার করে দেশীয় Locationনির্মাতাকে এমন একটি দিয়ে প্রতিস্থাপন করবে যা স্ট্রিং এবং উত্পাদন- window.locationপছন্দসই বস্তু গ্রহণ করবে : অবস্থান. js


1

সাধারণত ক্লিকগুলি অবস্থান পরিবর্তনের চেয়ে প্রথমে যায়, সুতরাং ক্লিকের পরে আপডেট উইন্ডো.লোকেশন.হ্যাশ পেতে সেটটাইমআউট করা ভাল ধারণা is

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

অথবা আপনি এর সাথে অবস্থান শুনতে পারেন:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

আমি একটি jQuery প্লাগইন লিখেছিলাম যা আপনি যা করতে চান তার মতো কিছু করে।

এটি একটি সাধারণ অ্যাঙ্কর রাউটার।


1

এখানে একটি সাধারণ ফাংশন যা প্রত্যাবর্তন করে trueবা false(হ্যাশট্যাগ নেই / রয়েছে):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

রিটার্নস trueএই ক্ষেত্রে।

@ জন-স্কিটের মন্তব্যের ভিত্তিতে


0

এটি বর্তমান পৃষ্ঠার ইউআরএলের জন্য এটি পরীক্ষা করার একটি সহজ উপায়:

  function checkHash(){
      return (location.hash ? true : false);
  }

-2

কখনও কখনও আপনি পুরো ক্যোয়ারী স্ট্রিং যেমন "# অ্যাঙ্করলিংক? প্রথম নাম = চিহ্ন" পান

হ্যাশটির মান পাওয়ার জন্য এটি আমার স্ক্রিপ্ট:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink

6
ক্যোরি স্ট্রিংয়ের পরে হ্যাশ যুক্ত হওয়ার পরে এটি কখনই সার্ভারে প্রেরণ করা সম্ভব নয়। আপনি নিজের হাতে ইউআরএল সংশোধন করার পরে কোয়েরি স্ট্রিংয়ের আগে কেবলমাত্র হ্যাশ উপস্থিত হবে।

1
হ্যাঁ, তবে কখনও কখনও লোকেরা এই ফর্ম্যাটটিতে url প্রেরণ করে। এটি ঠিক তাই আপনি কেবল হ্যাশ মান পেতে এবং অন্যদের অবহেলা করতে পারেন। :)
markg
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.