আমরা ইতিহাস এড়াতে, এবং পৃষ্ঠা পুনরায় লোড ছাড়াই অন-পৃষ্ঠার অ্যাঙ্করগুলিকে লক্ষ্য করতে ব্যবহার window.location.replaceকরতে পারি , তবে আইফ্রেমে নেই?
সমস্যাটি একটি সিএসপি (বিষয়বস্তু সুরক্ষা নীতি) লঙ্ঘন, যা রাজ্যগুলিকে script-src 'unsafe-inline'সক্ষম করতে হবে। আমার কোনও সিএসপি সংজ্ঞায়িত না হয়ে থাকে এবং আমি যদি একটির সংজ্ঞা দিই এবং অনুমতি দিই script-src 'unsafe-inline'তা এখনও একই লঙ্ঘনের ত্রুটি দেয়। Ie 11 / ক্রোম / এফএফ একই ফলাফল।
একই ডোমেনে ইফ্রেমে (একই ডিরেক্টরিতে)।
- কনসোলে iframe টার্গেট করুন এবং কনসোলে ব্যবহার করুন
window.location.replace('/samepage.html#onpage_anchor')। - এটা কাজ করে। এটি পৃষ্ঠাটি পুনরায় লোড না করে এবং ইতিহাস ছাড়াই অ্যাঙ্কারে লক্ষ্য করে।
- অ্যাঙ্কর লিঙ্কগুলিতে একই কোডটি ইনলাইন রাখুন এবং এটি কাজ করে।
- একই কোড ব্যবহার করুন বাহ্যিক স্ক্রিপ্ট, পেতে সিএসপি লঙ্ঘন ত্রুটি। যদি এটি আইফ্রেমে না হয় তবে এটি কাজ করে।
আমি একটি সিএসপি তৈরি চেষ্টা কর্ম করার অনুমতি, কিন্তু এমনকি সবচেয়ে প্রশ্রয়ের বিষয়বস্তু নিরাপত্তা নীতি সম্ভব এটা সম্ভব হবে।
সম্পাদনা করুন: তাই আমি প্লাঙ্কারে উদাহরণ একসাথে রেখেছি যা একাধিক ফাইলের মঞ্জুরি দেয় যাতে আমি সঠিক hrefs ব্যবহার করতে পারি যা পিতামাতার / সন্তানের পৃষ্ঠাগুলির উল্লেখ করে।
প্লাঙ্কার উদাহরণগুলি সম্পর্কে নোটগুলি:
এই উদাহরণগুলিতে সমস্যাটি পুনরুত্পাদন করা হয় না। স্ক্রিপ্ট পুরোপুরি কাজ করে, এমনকি আইফ্রেমেও। যাইহোক, একই কোডটি আমার স্থানীয় সার্ভারে কাজ করে না, বা যখন আমি এটি কোনও ভিপিএসে লাইভ চালাই।
আমি সন্দেহ করি যে সিএসপি লঙ্ঘন প্লাঙ্কারের উপর ট্রিগার হয় না কারণ প্লঙ্কার কোনও ধরণের বিমূর্ত স্তরের মাধ্যমে ব্রাউজারে সামগ্রী উপস্থাপন করছে।
প্রথমবার আপনি প্যারেন্টে অ্যাকর্ডিয়ন লিঙ্কগুলিতে ক্লিক করলে তা রিফ্রেশ হয়। কারণ পৃষ্ঠার সূচনাটি যেভাবে প্রাথমিকভাবে লোড হয় তা সূচক html উল্লেখ করে না। পরবর্তী ক্লিকগুলি পৃষ্ঠা পুনরায় লোড ব্যতীত প্রত্যাশা অনুযায়ী কাজ করে। ইফ্রামে কোনও সমস্যা নয় কারণ এটি প্রাথমিকভাবে চাইল্ড এইচটিএমএলকে উল্লেখ করে
কোডগুলি এটির কাজ করার পরিবর্তনের প্রয়োজন ছাড়াই প্রদর্শন করার জন্য এটি ভাল উদাহরণ (নীচে উল্লিখিত স্ট্যাকওভারফ্লো স্নিপেটগুলিতে তাদের কাজ করার জন্য hrefs পরিবর্তন করার প্রয়োজন হিসাবে)। এটি জাভাস্ক্রিপ্ট যেমনটি করা উচিত তেমন কাজ করে দেখায় এটিও ভাল। তবে এটি আসলে সমস্যাটি দেখায় না। আসল সমস্যাটি দেখতে আপনার এটিকে এখনও আপনার এডিটরটিতে লোড করে স্থানীয় সার্ভারে বা লাইভ হোস্টিং পরিবেশে চালানো দরকার।
প্লাঙ্কার উদাহরণ
সরলীকৃত কোড উদাহরণ
একটি এন্ট্রি সহ সাধারণ অ্যাকর্ডিয়ন। সমস্যা পুনরুত্পাদন করার জন্য যথেষ্ট Su
খোলা / নিকটে ক্লিক করা অ্যাকর্ডিয়ানকে প্রসারিত / পতন করবে, কোনও জেএস প্রয়োজন নেই। জেএসের ঠিক একই জিনিস করা উচিত তবে ইতিহাস ছাড়া। সূক্ষ্ম কাজ করে, তবে একটি আইফ্রেমে নয়।
কোড স্নিপেট নোট:
আমি কী বর্ণনা করছি সে সম্পর্কে ধারণা পেতে আপনি স্নিপেট চালাতে পারেন, তবে এটি আসলে সমস্যাটি প্রদর্শন করে না।
স্নিপেট প্রকৃত ব্রাউজারে যেমন আচরণ করে না, জাভাস্ক্রিপ্ট কাজ করে না not
স্নিপেট কোডটি দেখায়, তবে সমস্যাটি দেখার জন্য এটি একটি আইফ্রেমে চালানো উচিত। পার্থক্যটি এবং এটি কীভাবে কাজ করবে তা দেখতে এটি একটি আইফ্রেমের বাইরে চালান ।
- জেএসের সাথে লিঙ্কগুলি কীভাবে কাজ করে (পুরো ইউআরএল প্রতিস্থাপন করে) সেগুলি স্নিপেটে প্রদর্শিত হওয়ার পরিবর্তে তাদের অবশ্যই এটির মতো হওয়া উচিত (স্নিপেটে প্রকৃত এইচটিএমএল পৃষ্ঠাকে লক্ষ্য করতে পারে না)। সুতরাং আপনি যদি নিজের সম্পাদক এ এটি চেষ্টা করে থাকেন (দয়া করে করুন), তবে এই ফর্ম্যাটটির লিঙ্কগুলি পরিবর্তন করতে মনে রাখবেন যাতে তারা এখনও একই পৃষ্ঠা অ্যাঙ্কর, তবে পেজ এইচটিএমএল লিঙ্কটিতে অন্তর্ভুক্ত রয়েছে।
href="https://stackoverflow.com/thispage.html#ac1"href="#ac1"this_document.html#anchor
এই পান্ডুলিপি
$(document).ready(function() {
// anchor links without history
$.acAnch = function(event) {
event.preventDefault();
var anchLnk = $(event.target);
var anchTrgt = anchLnk.attr('href');
window.location.replace(anchTrgt);
}
// listen for anchor clicks
$('.accordion').on('click', 'a', $.acAnch);
});এটি খুব সহজ:
১.আচাঞ্চ ফাংশনটি hrefবৈশিষ্ট্যটি নিয়ে নেয় এবং এতে প্রবেশ করে window.location.replace()।
2. অ্যাকাঞ্চ ফাংশনটি চালানোর জন্য অ্যাকর্ডিয়নের মধ্যে অ্যাঙ্করগুলিতে ক্লিকগুলির জন্য শোনো।
সুতরাং সমস্ত স্ক্রিপ্ট চালানো হয় window.location.replace('/this_same_page.html#on_page_anchor')
আপনি যদি কনসোলে এটি কাজ করেন তবে কোনও সিএসপি লঙ্ঘন হবে না। তবে এটি বাহ্যিক স্ক্রিপ্ট থেকে চালানো কার্যকর নয়।
লিঙ্কগুলিতে ইনলাইন ঠিকঠাক কাজ করে:
onclick="event.preventDefault();window.location.replace('/thispage.html#acc0');"
onclick="event.preventDefault();window.location.replace('/thispage.html#acc1');"সম্পর্কিত লিঙ্কগুলিতে রেখে দেওয়া নিখুঁতভাবে কাজ করে তবে আমি সত্যিই এর মতো ইনলাইন স্ক্রিপ্টটি ব্যবহার না করা পছন্দ করি। বাহ্যিক স্ক্রিপ্ট দিয়ে এটি করার একটি উপায় অবশ্যই থাকতে হবে ।
আমি আইফ্রেমে পরিবর্তে পিতামাতার উপর জাভাস্ক্রিপ্ট চালানোর চেষ্টা করেছি (অবশ্যই সন্তানের মধ্যে লিঙ্কগুলি নির্বাচন করার জন্য পরিবর্তন সহ)। একই সিএসপি ত্রুটির ফলাফল।
আমি কেন এটা করছি?
ঠিক আছে সাইটের উদাহরণের চেয়ে অনেক জটিল। আইফ্রেমে অ্যাঙ্করগুলি ঠিকঠাক কাজ করে তবে তারা ইতিহাস যুক্ত করে। আপনি যদি জাভাস্ক্রিপ্ট ছাড়াই উপরের কোডটি চালনা করেন, (বা স্নিপেটটি চালান), কয়েকবার অ্যাকর্ডিয়নটি খুলুন এবং বন্ধ করুন এবং পিছনে বোতামটি ব্যবহার করুন, এটি খোলা কাছের অবস্থানে ফিরে যাবে।
আমি ইতিহাসটি কিছু মনে করব না, তবে এটি যদি কোনও আইফ্রেমে থাকে, যখন আপনি মাতৃ পৃষ্ঠাটি ছেড়ে যান এবং তারপরে ফিরে আসেন, যদি আইফ্রেমে ইতিহাসটি নষ্ট হয়ে যায়। ফিরে যাওয়া অ্যাকর্ডিয়নের মাধ্যমে আর ফিরে আসে না, তবে পরিবর্তে কেবল আইফ্রেমে পুনরায় লোড করে চলে। প্রাথমিকভাবে অ্যাঙ্করগুলি আইফ্রেমে পুনরায় লোড সৃষ্টি করে না তবে অ্যাকর্ডিয়ান রাজ্যের ইতিহাসের কেবলমাত্র পদক্ষেপগুলি, যা সূক্ষ্মভাবে কাজ করে, আপনি পৃষ্ঠাটি না ফেলে এবং ফিরে না আসা পর্যন্ত না করে। তারপরে আর অ্যাকর্ডিয়ান রাজ্যগুলির মধ্যে দিয়ে আর যায় না, তবে কেবল অভিন্ন আইফ্রেমে পুনরায় লোডগুলির একটি গাদা দিয়ে যায় । এটি খুব ব্যবহারকারীর বন্ধুত্বপূর্ণ আচরণ।
যদি অন্য কোনও পদ্ধতি কাজ করে তবে আমার অবস্থানের স্থান প্রয়োজন হবে না। যদিও আমি আরও অনেক পদ্ধতির চেষ্টা করেছি এবং আমি খুঁজে পেয়েছি যে পদ্ধতিগুলি একই ফলাফল অর্জন করতে পারে, সাধারণত একই ত্রুটির ফলস্বরূপ হয়।
লক্ষ্যটি হ'ল ইফ্রেমের অভ্যন্তরে পুনরায় লোড না করে এবং ইতিহাস ছাড়া পৃষ্ঠায় অ্যাঙ্কর লিঙ্কগুলি সক্রিয় করা ।
ইনলাইন স্ক্রিপ্ট কাজ করে। আমরা কি এটি একটি বাহ্যিক .js ফাইলে কাজ করতে পারি?
<a href="#ac0" class="ac-close">Close</a>কাজ করা উচিত।