জাভাস্ক্রিপ্ট ব্যবহার করে নতুন পৃষ্ঠাটি লোড না করে ব্রাউজারে URL টি পরিবর্তন করুন Change


297

আমার কীভাবে একটি জাভাস্ক্রিপ্ট ক্রিয়া থাকবে যা বর্তমান পৃষ্ঠায় কিছু প্রভাব ফেলতে পারে তবে ব্রাউজারে ইউআরএলও পরিবর্তন করতে পারে তাই যদি ব্যবহারকারী পুনরায় লোড বা বুকমার্কে আঘাত করে তবে নতুন ইউআরএল ব্যবহার করা হবে?

পিছনের বোতামটি মূল ইউআরএলটি পুনরায় লোড করে দিলে এটিও দুর্দান্ত হবে।

আমি URL এ জাভাস্ক্রিপ্টের স্থিতি রেকর্ড করার চেষ্টা করছি।


1
এটি এত সুন্দর হবে। অবশ্যই এটি একই ডোমেন পরিবর্তনের মধ্যে সীমাবদ্ধ থাকবে। তবে পথের কিছু ক্লায়েন্ট-সাইড নিয়ন্ত্রণ (এবং কেবল হ্যাশ নয়) এখন পৃষ্ঠা রিলোডগুলি অনেক অ্যাপ্লিকেশানের জন্য এক ধরণের "শেষ অবলম্বন"।
হারপো

1
একটি "সাজানোর" এর ভাল ব্যবহার pushState:for(i=1;i<50;i++){var txt="..................................................";txt=txt.slice(0,i)+"HTML5"+txt.slice(i,txt.length);history.pushState({}, "html5", txt);}
ডেরেক 朕 會 功夫


2
এই প্রভাবের উদাহরণ:

এটা একটা ভালো প্রশ্ন. তবে এটি একটি দুঃখজনক পরিস্থিতি যে এটি যদি আজ এইভাবে জিজ্ঞাসা করা হত, তবে এটি হ্রাস করা হত এবং "এই জাতীয় সাইট নয় যা লোকেরা আপনার জন্য আপনার সমস্ত কোড লিখতে পারে" by
শিশির

উত্তর:


118

এইচটিএমএল 5 এর সাথে, history.pushStateফাংশনটি ব্যবহার করুন । উদাহরণ হিসাবে:

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

এবং একটি href:

<a href="#" id='click'>Click to change url to bar.html</a>

আপনি যদি পিছনের বোতাম তালিকায় কোনও এন্ট্রি যোগ না করেই URL টি পরিবর্তন করতে চান তবে history.replaceStateপরিবর্তে ব্যবহার করুন।


আপনি ঠিক বলেছেন, গতবার আমি Chrome ব্যবহার করেছিলাম। আমি এখন আমার উবুন্টুতে ফায়ারফক্স 3.6 দিয়ে চেষ্টা করেছি, এটি কার্যকর হয়নি। আমি অনুমান করি যে
এইচএফএল

15
ডেভেলপার.মোজিলা.আর.ইন / ডিওএম / মনিপুলেটিং_এই_ ব্রাউজার_ইস্টরি থেকে নমুনা কোডটি কেটে আটকানো হয় । এই ক্ষেত্রে ফু ও বার কী বোঝাতে চাইছে তা আসলে বিরক্ত হয়।
মাইকমেকানা

2
ফু ও বার কোনও অর্থই বোঝায় না, এটি একটি নির্বিচারে সংজ্ঞায়িত রাষ্ট্রীয় অবজেক্ট যা আপনি পরে ফিরে আসতে পারেন।
পল ডিকসন

3
@ পল: হ্যাঁ, উপরের নিবন্ধটি সেই তথ্য সরবরাহ করে।
মাইকমেকানা

2
এই মন্তব্য পোস্ট করার সাথে সাথে এটি ফায়ারফক্স ক্রোম এবং সাফারিতে কাজ করে। আইপ্যাড বা আইফোনে মোবাইল সাফারি দিয়ে ভাগ্য নেই যদিও :(
সিড

187

যদি আপনি এটি ব্রাউজারগুলিতে সমর্থন করে যা এখনও সমর্থন করে না history.pushStateএবং history.popStateএখনও করতে চান তবে "পুরানো" উপায়টি খণ্ড সনাক্তকারীকে সেট করা যা কোনও পৃষ্ঠা পুনরায় লোডের কারণ হবে না।

মূল ধারণাটি window.location.hashসম্পত্তিটিকে এমন একটি মান হিসাবে সেট করা হয় যা আপনার যা যা প্রয়োজন তথ্যের তথ্য অন্তর্ভুক্ত করে, তারপরে উইন্ডো.অনশাচ্যান্ট ইভেন্টটি ব্যবহার করুন বা পুরানো ব্রাউজারগুলি যা সমর্থন করে না onhashchange(আই আই <8, ফায়ারফক্স <3.6) পর্যায়ক্রমে পরীক্ষা করে দেখুন দেখুন হ্যাশটি পরিবর্তিত হয়েছে ( setIntervalউদাহরণস্বরূপ ব্যবহার করে ) এবং পৃষ্ঠাটি আপডেট করুন। প্রাথমিক সামগ্রী সেট আপ করতে আপনাকে পৃষ্ঠা লোডে হ্যাশ মানটিও পরীক্ষা করতে হবে।

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

পৃষ্ঠায় আইডির সাথে সংঘর্ষের বিষয়ে একটি সাবধানতা অবলম্বন করা উচিত, কারণ ব্রাউজারটি কোনও ম্যাচিং আইডি সহ যে কোনও উপাদানগুলিতে স্ক্রোল করবে।


2
অনুসন্ধান ইঞ্জিনগুলি এই অভ্যন্তরীণ লিঙ্কগুলি (হ্যাশগুলি) উপেক্ষা করবেন না? আমার দৃশ্যে আমি চাই মাকড়সাগুলিও এই লিঙ্কগুলিতে তুলতে পারে।
ড্রয় নোকস

3
@ ড্র, যতদূর আমি জানি, অনুসন্ধান ইঞ্জিনগুলির জন্য কোনও পৃষ্ঠার অংশকে পৃথক ফলাফল হিসাবে বিবেচনা করার কোনও উপায় নেই।
ম্যাথু ক্রামলে

8
সার্চ ইঞ্জিনগুলিকে হ্যাশগুলি দেখার জন্য এখন একটি প্রস্তাব রয়েছে: googlewebmastercentral.blogspot.com/2009/10/…
LKM

5
setIntervalএটি পরিদর্শন করার পরিবর্তে ইভেন্টটি document.location.hashব্যবহার করতে পারেন hashchange, কারণ এটি অনেক বেশি গৃহীত। এখানে চেক করুন কি জন্য ব্রাউজারগুলিকে একে মান সমর্থন । আমার বর্তমান পদ্ধতির হ'ল এটি সমর্থনকারী ব্রাউজারগুলিতে পুশ / পপস্টেট ব্যবহার করা। অন্যগুলিতে আমি হ্যাশ সেট করেছি এবং কেবল hashchangeসমর্থনকারী ব্রাউজারগুলিতেই দেখি । এটি ইতিহাসের সমর্থন ছাড়াই IE <= 7 ছাড়ায়, তবে ব্যবহারকারীর পারমালিঙ্ক সহ। তবে কে << 7 ইতিহাসের যত্ন করে?
ইরে কারভালহো

2
@ গাবেডেল হ্যাঁ, যদিও আমি মনে করি না যে অ্যানালিটিক্স হ্যাশটি রেকর্ড করে, তাই এটির একই URL থাকবে। _trackPageviewনতুন পৃষ্ঠার "আসল" ইউআরএল দিয়ে ম্যানুয়ালি কল করা আরও ভাল উপায় ।
ম্যাথু ক্রামলে

37

window.location.href এ বর্তমান ইউআরএল রয়েছে। আপনি এটি থেকে পড়তে পারেন, আপনি এটিতে সংযোজন করতে পারেন এবং আপনি এটি প্রতিস্থাপন করতে পারেন যা কোনও পৃষ্ঠা পুনরায় লোডের কারণ হতে পারে।

যদি মনে হয়, আপনি জাভাস্ক্রিপ্টের স্থিতি ইউআরএলটিতে রেকর্ড করতে চান যাতে পৃষ্ঠাটি পুনরায় লোড না করে এটি বুকমার্ক করা যায়, এটি একটি # এর পরে বর্তমান ইউআরএলে যুক্ত করুন এবং জাভাস্ক্রিপ্টের টুকরোটি ওললোড ইভেন্টের মাধ্যমে পার্স করা হয়েছে এটিতে সংরক্ষিত অবস্থা রয়েছে কিনা তা দেখতে URL টি।

আপনি যদি একটি ব্যবহার করেন? একটি # এর পরিবর্তে, আপনি পৃষ্ঠাটির পুনরায় লোড করার জন্য বাধ্য করবেন, তবে যেহেতু আপনি সংরক্ষিত অবস্থাকে লোডে পার্স করবেন এটি আসলে কোনও সমস্যা নাও হতে পারে; এবং এটি ফরোয়ার্ড এবং পিছনের বোতামগুলিও সঠিকভাবে কাজ করবে।


2
ইউআরএলটিতে জাভাস্ক্রিপ্টের স্থিতি রেকর্ডিং হ'ল আমি যা করতে চাইছি
স্টিভেন নোবেল

21

আমি দৃ strongly়ভাবে সন্দেহ করব যে এটি সম্ভব নয়, কারণ এটি যদি অবিশ্বাস্য সুরক্ষা সমস্যা হত। উদাহরণস্বরূপ, আমি এমন একটি পৃষ্ঠা তৈরি করতে পারি যা দেখতে ব্যাংক লগইন পৃষ্ঠার মতো লাগত এবং ঠিকানার ব্যাঙ্কের মতো ঠিকানার বারে ইউআরএল তৈরি করতে পারে !

আপনি যদি এটি কেন করতে চান তা যদি আপনি ব্যাখ্যা করেন তবে লোকেরা বিকল্প পদ্ধতির পরামর্শ দিতে সক্ষম হতে পারে ...

[২০১১ সালে সম্পাদনা করুন: যেহেতু আমি এই উত্তরটি ২০০৮ সালে লিখেছিলাম, তাই এইচটিএমএল 5 কৌশল সম্পর্কিত আরও তথ্য প্রকাশিত হয়েছে যা URL একইরূপে পরিবর্তিত হওয়া অবধি URL পরিবর্তন করার অনুমতি দেয়]


6
পুনরায় লোড পরিবর্তনগুলি যদি পথ, ক্যোয়ারী স্ট্রিং এবং খণ্ডের মধ্যে সীমাবদ্ধ থাকে - তবে কর্তৃপক্ষের (ডোমেন এবং এ জাতীয়) নয়, এমন কোনও ইস্যু এতটা নয়।
অলি স্যান্ডার্স

2
youtube.com/user/SilkyDKwan#p/u/2/gTfqaGYVfMg একটি উদাহরণ যে এটি সম্ভব, ভিডিও স্যুইচ করার চেষ্টা করুন :)
স্পিডফায়ার

গৃহীত উত্তরে ম্যাথু চুমলে নোট হিসাবে আপনি কেবল অবস্থানটি পরিবর্তন করতে পারেন (# এর পরে সমস্ত কিছু)।
পল ডিকসন

2
তুমি কি ফেইসবুক ব্যবহার করো? ফেসবুক URL টি পরিবর্তন ছাড়া আবার লোড ব্যবহার history.pushState()
ডেরেক 朕 會 功夫

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

8

ব্রাউজার সুরক্ষা সেটিংস লোকেদের সরাসরি প্রদর্শিত url পরিবর্তন করতে বাধা দেয়। আপনি ফিশিং দুর্বলতাগুলির কারণ হিসাবে কল্পনা করতে পারেন।

পৃষ্ঠাগুলি পরিবর্তন না করেই ইউআরএল পরিবর্তন করার একমাত্র নির্ভরযোগ্য উপায় হ'ল অভ্যন্তরীণ লিঙ্ক বা হ্যাশ ব্যবহার করা। উদাহরণ: http://site.com/page.html হয়ে http://site.com/page.html#item1 । এই কৌশলটি প্রায়শই হাইজ্যাক্সে ব্যবহৃত হয় (এজাজ + ইতিহাস সংরক্ষণ করুন)।

এটি করার সময় আমি প্রায়শই হ্রেশ হিসাবে হ্যাশটির সাথে ক্রিয়াগুলির জন্য লিঙ্কগুলি ব্যবহার করব, তারপরে jquery সহ ইভেন্টগুলি ক্লিক করুন যা ক্রিয়া নির্ধারণ করতে এবং প্রতিনিধিত্ব করতে অনুরোধ করা হ্যাশ ব্যবহার করে।

আমি আশা করি এটি আপনাকে সঠিক পথে নিয়েছে।


দুঃখিত তবে আপনার উত্তরটি সত্য নয়। হ্যাঁ আপনি ইউআরএল পরিবর্তন করতে পারেন।
ডেরেক 朕 會 功夫

1
হ্যাঁ আপনি এইচটিএমএল 5 ইতিহাস এপিআই ব্যবহার করতে পারেন তবে এটি ক্রস ব্রাউজার নয়, যদিও আপনি এমন একটি পলি-ফিল ব্যবহার করতে পারেন যা হ্যাশ ইউআরএলে ফ্যালব্যাক করবে back
জেথ্রো লারসন

8

ব্রাউজারের ইউআরএল পরিবর্তন করার জন্য jQuery এর একটি দুর্দান্ত প্লাগইন রয়েছে, এটি jQuery-pusher বলে

জাভাস্ক্রিপ্ট pushStateএবং jQuery একসাথে ব্যবহার করা যেতে পারে:

history.pushState(null, null, $(this).attr('href'));

উদাহরণ:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});


কেবল জাভাস্ক্রিপ্ট ব্যবহার করেhistory.pushState() , যা রেফারারে পরিবর্তন করে , যা আপনার রাষ্ট্র পরিবর্তন করার পরে তৈরি করা XMLHttpRequest অবজেক্টের জন্য HTTP শিরোনামে ব্যবহৃত হয়।

উদাহরণ:

window.history.pushState("object", "Your New Title", "/new-url");

পুশস্টেট () পদ্ধতি:

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

  1. রাজ্য অবজেক্ট - স্টেট অবজেক্টটি একটি জাভাস্ক্রিপ্ট অবজেক্ট যা দ্বারা নির্মিত নতুন ইতিহাসের প্রবেশের সাথে সম্পর্কিত pushState()। যখনই ব্যবহারকারী নতুন রাজ্যে নেভিগেট করেন, একটি পপস্টেট ইভেন্ট নিক্ষেপ করা হয় এবং ইভেন্টের রাষ্ট্রীয় সম্পত্তিতে ইতিহাসের প্রবেশের রাজ্য অবজেক্টের একটি অনুলিপি থাকে।

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

  2. শিরোনাম - ফায়ারফক্স বর্তমানে এই প্যারামিটারটিকে উপেক্ষা করে, যদিও এটি ভবিষ্যতে এটি ব্যবহার করতে পারে। এখানে খালি স্ট্রিংটি পাস করা পদ্ধতিতে ভবিষ্যতের পরিবর্তনের বিরুদ্ধে নিরাপদ হওয়া উচিত। বিকল্পভাবে, আপনি যে রাজ্যে চলেছেন তার জন্য আপনি একটি সংক্ষিপ্ত শিরোনাম পাস করতে পারেন।

  3. ইউআরএল - নতুন ইতিহাস প্রবেশের URL টি এই প্যারামিটার দ্বারা দেওয়া হয়েছে। নোট করুন যে কল করার পরে ব্রাউজারটি এই ইউআরএলটি লোড করার চেষ্টা করবে না pushState(), তবে এটি ইউআরএল পরে লোড করার চেষ্টা করতে পারে, উদাহরণস্বরূপ ব্যবহারকারী তার ব্রাউজারটি পুনরায় চালু করার পরে। নতুন ইউআরএল নিখুঁত হওয়ার দরকার নেই; যদি এটি আপেক্ষিক হয় তবে এটি বর্তমান ইউআরএলের তুলনায় সমাধান হয়েছে। নতুন ইউআরএল অবশ্যই বর্তমান ইউআরএল হিসাবে একই উত্স হতে হবে; অন্যথায়, pushState()একটি ব্যতিক্রম নিক্ষেপ করা হবে। এই প্যারামিটারটি alচ্ছিক; যদি এটি নির্দিষ্ট না করা থাকে তবে এটি নথির বর্তমান ইউআরএলে সেট করা আছে।



3

ফেসবুকের ফটো গ্যালারীটি ইউআরএলে একটি # হ্যাশ ব্যবহার করে এটি করে। এখানে কয়েকটি উদাহরণ URL রয়েছে:

'পরবর্তী' ক্লিক করার আগে:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507

'পরবর্তী' ক্লিক করার পরে:

/photo.php?fbid=496429237507&set=a.218088072507.133423.681812507&pid=5887027&id=681812507#!/photo.php?fbid=496435457507&set=a.218088072507.133423.681812507&pid=5887085&id=681812507

নতুন URL টির সাথে সাথে হ্যাশ-ব্যাং (#!) নোট করুন।



2

আমার জন্য যা কাজ করছে তা হ'ল history.replaceState()ফাংশন যা নিম্নরূপ -

history.replaceState(data,"Title of page"[,'url-of-the-page']);

এটি পৃষ্ঠাটি পুনরায় লোড করবে না, আপনি জাভাস্ক্রিপ্টের ইভেন্টের সাথে এটি ব্যবহার করতে পারেন


1

আমি ভাবছিলাম যে পৃষ্ঠায় পিতামাতার পথটি একই রকম হলে এটি কেবল কার্যকর হবে, কেবলমাত্র এতে নতুন কিছু যুক্ত করা হয়েছে।

সুতরাং আসুন মতো ব্যবহারকারী হিসাবে পৃষ্ঠাটিতে থাকা যাক: http://domain.com/site/page.html তারপরে ব্রাউজারটি আমাকে করতে দেয় location.append = new.html এবং পৃষ্ঠাটি হয়ে যায়: http://domain.com/site/page.htmlnew.htmlএবং ব্রাউজারটি এটি পরিবর্তন করে না।

অথবা কেবলমাত্র ব্যক্তিটিকে প্যারামিটারটি পরিবর্তন করার অনুমতি দিন, তাই আসুন location.get = me=1&page=1

সুতরাং মূল পৃষ্ঠাটি হয়ে যায় http://domain.com/site/page.html?me=1&page=1এবং তা রিফ্রেশ হয় না।

# এর সাথে সমস্যা হ'ল হ্যাশ পরিবর্তন করা হলে ডেটা ক্যাশে করা হয় না (কমপক্ষে আমি এটি মনে করি না)। সুতরাং এটি প্রতিবারের মতো একটি নতুন পৃষ্ঠা লোড হচ্ছে, অন্যদিকে- অজ্যাক্স পৃষ্ঠায় ফিরে এবং ফরোয়ার্ড বোতামগুলি ডেটা ক্যাশে করতে সক্ষম হয় এবং ডেটা পুনরায় লোড করার জন্য সময় ব্যয় করে না।

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


1

আমার কোডটি হ'ল:

//change address bar
function setLocation(curLoc){
    try {
        history.pushState(null, null, curLoc);
        return false;
    } catch(e) {}
        location.hash = '#' + curLoc;
}

এবং ক্রিয়া:

setLocation('http://example.com/your-url-here');

এবং উদাহরণ

$(document).ready(function(){
    $('nav li a').on('click', function(){
        if($(this).hasClass('active')) {

        } else {
            setLocation($(this).attr('href'));
        }
            return false;
    });
});

এখানেই শেষ :)


1

আমি উপস্থিত একটি আরও সহজ উত্তর,

window.history.pushState(null, null, "/abc")

/abcএটি ব্রাউজার URL এ ডোমেন নামের পরে যুক্ত হবে । এই কোডটি কেবল অনুলিপি করুন এবং এটিকে ব্রাউজার কনসোলে পেস্ট করুন এবং URL টি " https://stackoverflow.com/abc " এ পরিবর্তন করতে দেখুন


0

আমি এর সাথে সাফল্য পেয়েছি:

location.hash="myValue";

এটি কেবলমাত্র #myValueবর্তমান ইউআরএল যুক্ত করে। আপনার যদি পৃষ্ঠা লোডে কোনও ইভেন্ট ট্রিগার করতে হয় তবে আপনি location.hashপ্রাসঙ্গিক মানটি পরীক্ষা করতে এটি ব্যবহার করতে পারেন । উদাহরণস্বরূপ #ফিরে আসা মান থেকে কেবল সরিয়ে ফেলতে ভুলবেন নাlocation.hash

var articleId = window.location.hash.replace("#","");
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.