পৃষ্ঠাটি পুনরায় লোড না করে আমি কীভাবে ইউআরএল সংশোধন করব?

Question

পৃষ্ঠাটি পুনরায় লোড না করে আমি কী বর্তমান পৃষ্ঠার ইউআরএল সংশোধন করতে পারি?

আমি যদি সম্ভব হয় তবে # হ্যাশের আগে অংশটি অ্যাক্সেস করতে চাই ।

আমার কেবল ডোমেনের পরে অংশটি পরিবর্তন করা দরকার , তাই আমি ক্রস-ডোমেন নীতিগুলি লঙ্ঘন করছি এমনটি হয় না।

 window.location.href = "www.mysite.com/page2.php";  // Sadly this reloads

Comments

প্রশ্নটি বোঝার জন্য এটি আরও সহজ করার জন্য, উদাহরণস্বরূপ, আপনি কোনও ফটো খুললে ফেসবুক এটি করে does ইউআরএল বারটি সেই ফটোতে সরাসরি নির্দেশ করতে পরিবর্তিত হয়, যাতে আপনি সাইটে যেখানেই না গিয়ে URL টি ভাগ করে নিতে পারেন। গত দশকে ফ্রেমিংয়ের উপর ভিত্তি করে সাইটগুলি মনে আছে? আপনি কেবল হোমপেজের url পেতে পারেন, কারণ কেবলমাত্র অভ্যন্তরীণ ফ্রেমগুলি পরিবর্তন করা হয়েছিল। এবং এটা ভয়ানক ছিল।

— স্পাইডি

যদিও history.pushState()সম্ভবত এখানে সঠিক উত্তর রয়েছে, এই পরিস্থিতিতে (সঠিক পরিস্থিতির উপর নির্ভর করে ...) একটি সার্ভার-সাইড পুনর্নির্দেশের ব্যবহারের সম্ভাবনা (যেমন অ্যাপাচি-র পুনরায় লেখক নির্দেশিকা ব্যবহারের মাধ্যমে) আপনি বিবেচনা করতে চান এমন কিছু বা কমপক্ষে is সতর্ক হোন. ভেবেছি এটা উল্লেখ করা উচিত!

— Doin থেকে

Answer 1

এটি এখন ক্রোম, সাফারি, ফায়ারফক্স 4+, এবং ইন্টারনেট এক্সপ্লোরার 10pp4 + এ করা যেতে পারে!

আরও তথ্যের জন্য এই প্রশ্নের উত্তর দেখুন: হ্যাশ ছাড়াই বা নতুন পৃষ্ঠাটি পুনরায় লোড না করে নতুন URL দিয়ে ঠিকানা বার আপডেট করা

উদাহরণ:

 function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

তারপরে আপনি window.onpopstateপিছনে / ফরোয়ার্ড বোতাম নেভিগেশন সনাক্ত করতে ব্যবহার করতে পারেন :

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

---

ব্রাউজারের ইতিহাসের কৌশলটি আরও গভীরভাবে দেখার জন্য এই এমডিএন নিবন্ধটি দেখুন ।

Comments

ফেসবুক কীভাবে আই 7 এ এটি করতে পারে?

— ডমিনিক

@ CHiRiLo ইতিহাস. js পরীক্ষা করে দেখুন যা এইচটিএমএল 5 ইতিহাস এপিআই সমর্থন করে না এমন ব্রাউজারগুলির জন্য একটি ফ্যালব্যাক সরবরাহ করে।

— ডেভিড মারডোক

@ ইনফেনাসাস যদি কোথাও ইউআরএলতে # সাইন থাকে তবে সেই কৌশলটি বছরের পর বছর ধরে বিদ্যমান ..

— ইজকাটা

"IE10pp4 +" এর "পিপি 4 +" অংশটি কী বোঝায়?

— স্কট টেসলার

প্ল্যাটফর্মের পূর্বরূপ 4

— ডেভিড মারডোক

Answer 2

এইচটিএমএল 5 history.pushState()এবং history.replaceState()পদ্ধতিগুলি চালু করেছে , যা আপনাকে যথাক্রমে ইতিহাসের এন্ট্রিগুলি সংযোজন ও সংশোধন করতে দেয়।

window.history.pushState('page2', 'Title', '/page2.php');

এখান থেকে এ সম্পর্কে আরও পড়ুন

Comments

কাজ নাও করতে পারে file:///নিরাপত্তার কারণে, উপর যেমন ফায়ারফক্স 30. টেস্টের জন্য localhostসঙ্গে python -m SimpleHTTPServer।

— সিরো সান্তিলি 冠状 病毒 审查 六四 事件 法轮功

প্রথম প্যারামিটারটি কেবল একটি স্ট্রিং নয়, একটি অবজেক্ট হিসাবে প্রত্যাশিত।

— অ্যালেক্সিস উইল্ক

আইএমও এটি সত্যই সেরা উত্তর। আপনি যা করতে চান তা হ'ল বর্তমান ইউআরএল ({}, নাল, #NewPath) আপডেট করার জন্য আপনাকে যা করতে হবে তা হ'ল। যদি (ইতিহাস.পুশ স্টেট) first with দিয়ে প্রথম পরীক্ষা করা ভাল

— ক্রেগ জ্যাকবস

আপনি যদি পরিবর্তন করতে চান না তবে আপনি কেবল প্রথম 2 পরামিতিগুলির জন্য নাল লিখতে পারেন। তৃতীয় প্যারামিটারের জন্য আপনি একটি পরম urlও ব্যবহার করতে পারেন।

— অ্যান্ড্রু

উত্তরের জন্য যদি আপনি আরও কিছু তথ্য কেবল উত্তরে রেখে দেন। আমার ধারণা নেই, 1 পরামিতি কী করে।

— রেডক্লুভার

Answer 3

আপনি url পরিবর্তন করতে চান তবে ব্রাউজারের ইতিহাসে এন্ট্রি যোগ করতে না চাইলে আপনি HTML5 রিপ্লেসমেট ব্যবহার করতে পারেন:

if (window.history.replaceState) {
   //prevents browser from storing history with each change:
   window.history.replaceState(statedata, title, url);
}

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

Answer 4

এখানে আমার সমাধানটি (নতুন ইউআরএল আপনার নতুন ইউআরএল যা আপনি বর্তমানের সাথে প্রতিস্থাপন করতে চান):

history.pushState({}, null, newUrl);

Comments

(ইতিহাস.pushState) with {পুরানো ব্রাউজারের ক্ষেত্রে প্রথমে পরীক্ষার জন্য সেরা।

— ক্রেগ জ্যাকবস

এটি ফায়ারফক্সে পাবেন আর কাজ করে না: অপারেশনটি নিরাপত্তাহীন।

— kkatusic

Answer 5

দ্রষ্টব্য: আপনি যদি এইচটিএমএল 5 ব্রাউজারের সাথে কাজ করছেন তবে আপনার এই উত্তরটি উপেক্ষা করা উচিত। অন্যান্য উত্তরগুলিতে দেখা যায় এটি এখন সম্ভব।

পৃষ্ঠাটি পুনরায় লোড না করে ব্রাউজারে URL টি সংশোধন করার কোনও উপায় নেই । ইউআরএলটি সর্বশেষ লোড হওয়া পৃষ্ঠাটি উপস্থাপন করে। আপনি যদি এটি পরিবর্তন করেন ( document.location) তবে এটি পৃষ্ঠাটি পুনরায় লোড করবে।

এর একটি স্পষ্ট কারণ হ'ল, আপনি কোনও সাইট লিখেছেন www.mysite.comযা কোনও ব্যাংক লগইন পৃষ্ঠার মতো দেখাচ্ছে। তারপর আপনি ব্রাউজার URL বারে বলতে পরিবর্তন www.mybank.com। ব্যবহারকারীরা সত্যিই অচেতন হবে যে তারা সত্যিই তাকিয়ে আছে www.mysite.com।

Comments

আমি ডোমেনটি পরিবর্তন করতে চাই না, কেবলমাত্র পথ এবং ফাইলের নাম।

— TheFlash

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

— রবিন ডে

আপনি আসলে এটি ফ্ল্যাশ দিয়ে করতে পারেন। এটি আপনাকে অনুরোধ না করেই URL টি সংশোধন করার অনুমতি দেবে। এটি সম্ভব কারণ ফ্ল্যাশ ব্রাউজারের বাইরে পরিচালনা করে তবে এটির সাথে খুব দৃ .়তার সাথে।

— নিক বেরার্ডি

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

— রবিবার আয়রনফুট

এই উত্তরটি আর 100% সত্য নয়। বিস্তারিত জানার জন্য আমার উত্তর দেখুন।

— ডেভিড মারডোক

Answer 6

parent.location.hash = "hello";

Comments

আমি ইউআরএল পরিবর্তন করতে চাই, কেবল হ্যাশ নয় - # মায়াডাটা

— TheFlash

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

— ম্যাথু লক

@ জার্ভিস: পার্থক্য কী?

— গোলমাল

স্পষ্টভাবে ট্র্যাকিং পরিষেবাটিতে না পাঠানো হলে @ Noisy সার্ভার সাইড ট্র্যাকিং হ্যাশগুলি দেখতে পারে না।

— RedYetiCo

আপনি যদি কোনও এমভিসি ফ্রেমওয়ার্ক ব্যবহার করেন যা হ্যাশের দিকে যাত্রা করে, উদাহরণস্বরূপ ব্যাকবোন if

— ক্যাটবাজার

Answer 7

আধুনিক ব্রাউজার এবং এইচটিএমএল 5pushState এ উইন্ডোতে একটি পদ্ধতি বলা হয় history। এটি URL টি পরিবর্তন করবে এবং পৃষ্ঠাটি লোড না করে ইতিহাসে ঠেলে দেবে।

আপনি এটির মতো এটি ব্যবহার করতে পারেন, এতে 3 টি প্যারামিটার লাগবে, 1) রাষ্ট্রীয় অবজেক্ট 2) শিরোনাম এবং একটি ইউআরএল):

window.history.pushState({page: "another"}, "another page", "example.html");

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

এছাড়াও history.replaceState()ঠিক একই জিনিসটি রয়েছে যা বাদ দিয়ে এটি নতুন ইতিহাস তৈরির পরিবর্তে বর্তমান ইতিহাসটি সংশোধন করবে!

এছাড়াও আপনি history.pushStateউপস্থিত থাকলে তা পরীক্ষা করার জন্য একটি ফাংশন তৈরি করতে পারেন , তারপরে বাকিটি এভাবে চালিয়ে যান:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);
  }
}

goTo("another page", "example", 'example.html');

এছাড়াও আপনি এর #জন্য পরিবর্তন করতে পারেন <HTML5 browsersযা পৃষ্ঠাটি পুনরায় লোড করবে না। অ্যাঙ্গুলার হ্যাশট্যাগ অনুযায়ী এসপিএ করতে এভাবেই ব্যবহার করে ...

পরিবর্তন #করা বেশ সহজ, এর মতো করা:

window.location.hash = "example";

এবং আপনি এটি এটি সনাক্ত করতে পারেন:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

Comments

চান window.onhashchangeএবং window.onpopstateএই ক্ষেত্রে একই কাজ?

— J0ANMM

পৃষ্ঠার সামগ্রীগুলিও কীভাবে লোড করবেন? এটি কেবলমাত্র ইউআরএল

— এমডি

আপনি সাধারণত এজ্যাক্সের সাহায্যে সামগ্রীটি লোড করুন।

— অ্যান্ড্রয়েড ডেভ

Answer 8

এইচটিএমএল 5 রিপ্লেসমেট উত্তরটি ইতিমধ্যে ভিভার্ট এবং জিও1701 দ্বারা উল্লিখিত রয়েছে। তবে এটি সমস্ত ব্রাউজার / সংস্করণে সমর্থিত নয়। ইতিহাস. js এইচটিএমএল 5 স্টেটের বৈশিষ্ট্যগুলিকে মোড়ানো এবং এইচটিএমএল 4 ব্রাউজারগুলির জন্য অতিরিক্ত সমর্থন সরবরাহ করে।

Answer 9

এইচটিএমএল 5 এর আগে আমরা ব্যবহার করতে পারি:

parent.location.hash = "hello";

এবং:

window.location.replace("http:www.example.com");

এই পদ্ধতিটি আপনার পৃষ্ঠাটি পুনরায় লোড করবে, তবে এইচটিএমএল 5 এটি প্রবর্তন করেছে history.pushState(page, caption, replace_url)যা আপনার পৃষ্ঠাটি পুনরায় লোড করা উচিত নয়।

Comments

সমস্যাটি history.pushState(..)হ'ল, যদি আপনি অন্য ডোমেইনে পুনর্নির্দেশ করতে চান তবে ক্রস ডোমেন নীতি কার্যকর হয়। window.location.replace(..)অন্য ডোমেনে পুনঃনির্দেশের সাথে সাথেই সম্ভব।

— ওএসওয়ারাক্স

Answer 10

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

এই ক্ষেত্রে:

1) ব্যবহারকারী চালু আছে www.site.com/section/page/4

2) ব্যবহারকারী এমন কিছু ক্রিয়া করেন যা ইউআরএলকে www.site.com/#/section/page/6(হ্যাশ সহ) পরিবর্তন করে । বলুন আপনি পৃষ্ঠায় 6 পৃষ্ঠার জন্য সঠিক সামগ্রীটি লোড করেছেন, সুতরাং হ্যাশ বাদেও ব্যবহারকারী খুব বিরক্ত হয় না।

3) ব্যবহারকারী এই URL টি অন্য কারও কাছে পাস করে, বা এটি বুকমার্ক করে

4) অন্য কারও, বা পরবর্তী তারিখে একই ব্যবহারকারী, যান www.site.com/#/section/page/6

5) কোডের কোডটি www.site.com/ব্যবহারকারীকে www.site.com/section/page/6এই জাতীয় কিছু ব্যবহার করে পুনঃনির্দেশ করে :

if (window.location.hash.length > 0){ 
   window.location = window.location.hash.substring(1);
}

আশা করি তা উপলব্ধি! এটি কিছু পরিস্থিতিতে কার্যকর উপায়ে।

Answer 11

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

  function ChangeUrl(page, url) {
        if (typeof (history.pushState) != "undefined") {
            var obj = {Page: page, Url: url};
            history.pushState(obj, obj.Page, obj.Url);
        } else {
            window.location.href = "homePage";
            // alert("Browser does not support HTML5.");
        }
    }

  ChangeUrl('Page1', 'homePage');

Comments

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

— ইউএস

Answer 12

লোকেশনটির যে কোনও পরিবর্তন ( window.locationবা হয় document.location) সেই নতুন ইউআরএলটিতে একটি অনুরোধ ঘটাবে , যদি আপনি কেবল ইউআরএল খণ্ড পরিবর্তন না করেন। আপনি যদি ইউআরএল পরিবর্তন করেন তবে আপনি URL পরিবর্তন করবেন।

আপনি বর্তমানে যে ইউআরএলগুলি ব্যবহার করছেন তা যদি আপনি পছন্দ না করেন তবে সার্ভার-সাইডের ইউআরএল পুনর্লিখনের কৌশলগুলি অ্যাপাচি-এর Mod_rewrite এর মতো ব্যবহার করুন।

Comments

আমি কি "লোকেশন.পথনাম" ব্যবহার করতে পারি ??

— TheFlash

না, সেই বৈশিষ্ট্যটি পরিবর্তন করাও একটি অনুরোধের কারণ ঘটবে।

— গাম্বো

Answer 13

আপনি অ্যাঙ্কর ট্যাগ যুক্ত করতে পারেন। আমি এটি আমার সাইটে ব্যবহার করি যাতে লোকেরা পৃষ্ঠায় কী দেখছে তা গুগল অ্যানালিটিকাসহ আমি ট্র্যাক করতে পারি।

আমি কেবল একটি অ্যাঙ্কার ট্যাগ যুক্ত করব এবং তারপরে আমি যে পৃষ্ঠার অংশটি ট্র্যাক করতে চাইছি তা:

var trackCode = "/#" + urlencode($("myDiv").text());
window.location.href = "http://www.piano-chords.net" + trackCode;
pageTracker._trackPageview(trackCode);

Answer 14

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

এই উত্তরটির প্রায় এক বছর কেটে গেছে এবং ইতিহাস.js বৃদ্ধি পেয়ে আরও স্থিতিশীল এবং ক্রস ব্রাউজারে পরিণত হয়েছে। এখন এটি এইচটিএমএল 5-এর সাথে সাথে অনেকগুলি HTML4- কেবল ব্রাউজারগুলিতে ইতিহাসের রাজ্যগুলি পরিচালনা করতে ব্যবহার করা যেতে পারে। এই ডেমোতে আপনি এটি কীভাবে কাজ করে তার উদাহরণ দেখতে পাবেন (পাশাপাশি এর কার্যকারিতা এবং সীমাগুলি চেষ্টা করতে সক্ষম হবেন)।

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

পরিশেষে, হ্যাশগুলি (এবং হ্যাশব্যাঙ্গস) ব্যবহার সম্পর্কে কী কী সমস্যা হতে পারে তার একটি বিস্তৃত ব্যাখ্যার জন্য, বেঞ্জামিন লুপটন এর এই লিঙ্কটি দেখুন ।

Answer 15

history.pushState()এইচটিএমএল 5 ইতিহাস এপিআই থেকে ব্যবহার করুন ।

পড়ুন HTML5 এর ইতিহাস এপিআই আরো বিস্তারিত জানার জন্য।

Answer 16

আপনি এই অ্যাপ্লিকেশন যাতে কোথাও এই সুন্দর এবং সাধারণ ফাংশন ব্যবহার করতে পারেন।

function changeurl(url, title) {
    var new_url = '/' + url;
    window.history.pushState('data', 'Title', new_url);
    document.title = title;
}

আপনি কেবল ইউআরএল সম্পাদনা করতে পারবেন না তবে আপনি এটির সাথে শিরোনামও আপডেট করতে পারেন।

বেশ সহায়ক প্রত্যেককে।

Comments

এমনকি অ্যাঙ্করদের জন্য window.history.pushState('data', 'Title', '#new_location');

— মনোযোগের