দস্তাবেজটি না লাফিয়ে আমি কীভাবে উইন্ডো.লোকেশন.হ্যাশ আপডেট করতে পারি?

Question

আমার ওয়েবসাইটে একটি স্লাইডিং প্যানেল স্থাপন করা আছে।

এটি অ্যানিমেটিং শেষ হলে, আমি হ্যাশটি সেট করেছিলাম

function() {
   window.location.hash = id;
}

(এটি একটি কলব্যাক, এবং এটি idপূর্বে বরাদ্দ করা হয়েছে)।

ব্যবহারকারীটি প্যানেলটি বুকমার্ক করার অনুমতি দিতে এবং জাভাস্ক্রিপ্টহীন সংস্করণে কাজ করার জন্য এটি ভাল কাজ করে।

যাইহোক, আমি যখন হ্যাশ আপডেট করি তখন ব্রাউজারটি লোকেশনে লাফ দেয়। আমার ধারণা এটি প্রত্যাশিত আচরণ।

আমার প্রশ্ন: আমি কীভাবে এটি প্রতিরোধ করতে পারি? অর্থাত আমি উইন্ডোর হ্যাশ পরিবর্তন করতে পারেন কিন্তু না উপাদান যদি হ্যাশ বিদ্যমান ব্রাউজার স্ক্রল আছে? কিছু ধরণের event.preventDefault()জিনিস?

আমি jQuery 1.4 এবং স্ক্রোলটো প্লাগইন ব্যবহার করছি ।

অনেক ধন্যবাদ!

হালনাগাদ

প্যানেল পরিবর্তন করে এমন কোড এখানে।

$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});

Comments

আমি ধরে নিয়েছি আপনি চেষ্টা করেছেন event.preventDefault():)

— মার্কো

@ মারকো আমি কোথায় রাখব জানি না!

— অলেক্স

আপনি কি আপনার বাকী কোডটি পোস্ট করতে পারেন?

— মার্কো

@ মারকো ইভানোভস্কি আমি এটি প্রাসঙ্গিক বলে মনে করি না, তবে আমি কী করতে পারি তা আমি দেখতে পাচ্ছি।

— অ্যালেক্স

@ গ্যারেথ আমি মনে করি না এর পক্ষে কোনও জায়গা আছে কারণ হ্যাশ আপডেট করার সাথে সাথেই এটি ঘটে।

— অলেক্স

Answer 1

পুরানোগুলিতে ফ্যালব্যাক সহ আধুনিক ব্রাউজারগুলিতে হিস্ট্রি এপিআই ব্যবহার করে একটি কার্যকারিতা রয়েছে:

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

ক্রেডিট লেয়া ভেরুতে যায়

Comments

এটি আমার মতে আরও ভাল উত্তর।

— গ্রেগ আনানডালে

নোট করুন যে ব্রাশের ইতিহাসের স্ট্যাকে কোনও রাজ্য যুক্ত করার জন্য পুশস্টেটের পার্শ্ব- (অভিযুক্ত) প্রভাব রয়েছে। অন্য কথায়, ব্যবহারকারী যখন পিছনের বোতামটি ক্লিক করে, আপনি পপসেট ইভেন্ট শ্রোতাদের যুক্ত না করে কিছুই হবে না।

— ডেভিড কুক

@ ডেভিডকুক - ইভেন্ট শ্রোতার history.replaceStateপ্রয়োজনীয়তা এড়াতে আমরা ব্যবহার করতে পারি (যা হ্যাশ পরিবর্তনের জন্য আরও বুদ্ধিমান হতে পারে) popstate।

— জ্যাক

এটি আমার পক্ষে কাজ করেছে। আমি ইতিহাসের প্রভাবটি পছন্দ করি like আমি এই সাবধানবাণীটি যুক্ত করতে চাই যে এটি hashchangeইভেন্টটিকে ট্রিগার করবে না । এটাই আমার চারপাশে কাজ করতে হয়েছিল।

— জর্দান

সতর্ক বার্তা! এটি কোনও hashchangeইভেন্টকে ট্রিগার করবে না

— সান্টিয়াগো আরিজিটি

Answer 2

সমস্যাটি হ'ল আপনি উইন্ডোটি.লোকেশন.হ্যাশটি কোনও উপাদানটির আইডি বৈশিষ্ট্যটিতে সেট করছেন। আপনি "ডিফল্ট () প্রতিরোধ করুন" না কেন নির্বিশেষে ব্রাউজারটির সেই উপাদানটিতে ঝাঁপিয়ে পড়া প্রত্যাশিত আচরণ।

এটির কাছাকাছি যাওয়ার একটি উপায় হ্যাশটির এমন একটি স্বেচ্ছাসেবী মানের সাথে উপসর্গ করা:

window.location.hash = 'panel-' + id.replace('#', '');

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

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

আপনার যদি সর্বদা এটি কাজ করার প্রয়োজন হয় (এবং কেবলমাত্র প্রাথমিক পৃষ্ঠার লোড নয়), আপনি হ্যাশ মানটির পরিবর্তনগুলি পর্যবেক্ষণ করতে এবং ফাইলে সঠিক উপাদানটিতে যেতে পারেন এমন একটি ফাংশন ব্যবহার করতে পারেন:

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

Comments

এটিই একমাত্র সমাধান যা আসলে প্রশ্নের উত্তর দেয়

— amosmos

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

— lowtechsun

ভাল সমাধান, তবে ওপিএস সমাধানকে দুর্বল করে কারণ এটি বুকমার্কিং বিভাগগুলির ব্যবহারকে অস্বীকার করে

— সামুস

Answer 3

সস্তা এবং বাজে সমাধান .. কুৎসিত ব্যবহার করুন #! শৈলী।

এটি সেট করতে:

window.location.hash = '#!' + id;

এটি পড়তে:

id = window.location.hash.replace(/^#!/, '');

যেহেতু এটি পাতায় নোঙ্গর বা আইডি মিলছে না এবং লাফ দেয় না।

Comments

আমি আই 7 এবং সাইটের কিছু মোবাইল সংস্করণে সামঞ্জস্যতা সংরক্ষণ করতে হয়েছিল। এই সমাধানটি আমার পক্ষে সবচেয়ে পরিষ্কার ছিল। সাধারণত আমি পুশস্টেটের সমাধানগুলিতেই থাকি।

— এরিক গুডউইন

এর সাথে হ্যাশ সেট করা: window.location.hash = '#/' + id;এবং এরপরে এর সাথে প্রতিস্থাপন করা: window.location.hash.replace(/^#\//, '#');ইউআরএলকে কিছুটা পূর্বস্বীকৃত করবে -> projects/#/tab1

— braitsch

Answer 4

আপনি কেন বর্তমান স্ক্রোলের অবস্থানটি পান না, এটি একটি ভেরিয়েবলের মধ্যে রাখুন তারপর হ্যাশ বরাদ্দ করুন এবং পৃষ্ঠাটি যেখানে স্ক্রোলটি সেখানে ছিল সেখানে ফিরিয়ে দিন:

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

এই কাজ করা উচিত

Comments

এইচএম, এটি আমার জন্য কিছুক্ষণের জন্য কাজ করছিল, তবে গত কয়েকমাসে এটি ফায়ারফক্সে কাজ করা বন্ধ করে দিয়েছে ....

— ম্যাচিউ

Answer 5

আমি আধুনিক ব্রাউজারগুলির জন্য আটিলা ফুল্প (লেয়া ভেরু) সমাধান এবং পুরানো ব্রাউজারগুলির জন্য গ্যাভিন ব্রুকের সমাধানের সংমিশ্রণটি নিম্নরূপ ব্যবহার করেছি:

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

গ্যাভিন ব্রোকের মত পর্যবেক্ষণ অনুসারে, আইডিটি ফিরে পেতে আপনাকে স্ট্রিংটি ব্যবহার করতে হবে (যা এই ক্ষেত্রে "!" থাকতে পারে বা না):

id = window.location.hash.replace(/^#!?/, '');

এর আগে, আমি ব্যবহারকারী 706270 দ্বারা প্রস্তাবিত অনুরূপ একটি সমাধানের চেষ্টা করেছি, তবে এটি ইন্টারনেট এক্সপ্লোরারের সাথে ভালভাবে কাজ করে নি: যেমন এর জাভাস্ক্রিপ্ট ইঞ্জিন খুব দ্রুত নয়, আপনি স্ক্রোল বৃদ্ধি এবং হ্রাস লক্ষ্য করতে পারেন, যা একটি বাজে ভিজ্যুয়াল এফেক্ট তৈরি করে।

Answer 6

এই সমাধানটি আমার পক্ষে কাজ করেছিল।

সেটিংসে সমস্যাটি location.hashহ'ল পৃষ্ঠাটি যদি পৃষ্ঠায় পাওয়া যায় তবে সেই আইডিটিতে পৃষ্ঠাটি লাফিয়ে যাবে।

সমস্যাটি window.history.pushStateহ'ল এটি ব্যবহারকারীদের ক্লিক করা প্রতিটি ট্যাবটির জন্য ইতিহাসে একটি এন্ট্রি যুক্ত করে। তারপরে ব্যবহারকারী যখন backবোতামটি ক্লিক করেন , তারা পূর্বের ট্যাবে যান। (এটি আপনি যা চান তা হতে পারে বা নাও হতে পারে I আমি যা চাইছিলাম তা তা নয়)।

আমার জন্য, replaceStateএটি আরও ভাল বিকল্প ছিল যে এটি কেবলমাত্র বর্তমান ইতিহাসকে প্রতিস্থাপন করে, তাই যখন ব্যবহারকারী backবোতামটি ক্লিক করেন , তারা পূর্বের পৃষ্ঠায় যান।

$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

MDN এ ইতিহাস API ডক্স পরীক্ষা করে দেখুন ।

Answer 7

আমি নিশ্চিত না আপনি যদি মূল উপাদানটি পরিবর্তন করতে পারেন তবে আইডি অ্যাটর ব্যবহার করে ডেটা-আইডির মতো অন্য কোনওটিতে স্যুইচ করবেন কীভাবে? তারপরে আপনার হ্যাশ মানের জন্য কেবল ডেটা-আইডির মানটি পড়ুন এবং এটি লাফিয়ে উঠবে না।

Answer 8

এই সমাধানটি আমার পক্ষে কাজ করেছিল

// store the currently selected tab in the hash value
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

এবং আমার পুরো জেএস কোডটি

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }
   // window.location.hash = '#!' + id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
// console.log(hash);
$('#myTab a[href="' + hash + '"]').tab('show');

Answer 9

ল্যারাভেল ফ্রেমওয়ার্ক ব্যবহার করার সময়, আমার রুটটি মুছে ফেলার পরে আমার কাছে একটি রুট-> ব্যাক () ফাংশন ব্যবহার করতে কিছু সমস্যা হয়েছিল। আমার হ্যাশ রাখতে, আমি একটি সাধারণ ফাংশন তৈরি করেছি:

$(function() {   
    if (localStorage.getItem("hash")    ){
     location.hash = localStorage.getItem("hash");
    }
}); 

এবং আমি এটি অন্য জেএস ফাংশনটিতে এটি সেট করেছি:

localStorage.setItem("hash", myvalue);

আপনি আপনার স্থানীয় স্টোরেজ মানগুলি যে কোনওভাবে পছন্দ করতে পারেন; খনি নামে hash।

সুতরাং, যদি হ্যাশটি PAGE1 এ সেট করা থাকে এবং তারপরে আপনি PAGE2 তে নেভিগেট করেন; আপনি PAGE2 এ ফিরে ক্লিক করলে হ্যাশটি PAGE1 এ পুনরায় তৈরি করা হবে।