আমি একটি iframe থেকে একটি প্যারেন্ট উইন্ডো জাভাস্ক্রিপ্ট ফাংশন কল করতে চাই।
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
আমি একটি iframe থেকে একটি প্যারেন্ট উইন্ডো জাভাস্ক্রিপ্ট ফাংশন কল করতে চাই।
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
উত্তর:
<a onclick="parent.abc();" href="#" >Call Me </a>
উইন্ডো.প্যারেন্ট দেখুন
বর্তমান উইন্ডো বা সাবফ্রেমের পিতামাতার একটি রেফারেন্স প্রদান করে।
যদি একটি উইন্ডোটির পিতামাতা না থাকে তবে এর প্যারেন্ট সম্পত্তি নিজেই একটি রেফারেন্স।
যখন একটি উইন্ডো একটি ইন লোড হয় <iframe>
, <object>
অথবা <frame>
তার পিতা বা মাতা উপাদান উইন্ডোতে এম্বেডিং সঙ্গে উইন্ডো।
alert
ডাকা হবে; পিতা-মাতার alert
ফাংশন বা আইফ্রেমের alert
ফাংশন, ক্ষেত্রে parent.abc();
যদি আইফ্রেমে ডাকা হয়?
window.postMessage()
(বা window.parent.postMessage()
) বিদ্যমান। অ্যান্ড্রি উত্তরটি পরীক্ষা করে দেখুন
এটি খুব বেশি কেন কাজ করে না তা আমাকে সম্প্রতি খুঁজে বের করতে হয়েছিল।
যে জাভাস্ক্রিপ্টটি আপনি বাচ্চা ইফ্রামের কাছ থেকে কল করতে চান তা পিতামাতার মাথায় থাকা দরকার। এটি যদি শরীরে থাকে তবে স্ক্রিপ্টটি বিশ্বব্যাপী সুযোগে উপলভ্য নয়।
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
আশা করি এটি যে কেউ এই সমস্যা নিয়ে আবার হোঁচট খাচ্ছে সহায়তা করে।
এই পদ্ধতিটি নিরাপদে cross-origin
যোগাযোগ সক্ষম করে।
এবং যদি আপনার প্যারেন্ট পৃষ্ঠা কোডটিতে অ্যাক্সেস থাকে তবে যে কোনও প্যারেন্ট পদ্ধতিতে কল করার পাশাপাশি কোনও ডেটা সরাসরি থেকে পাস করা যেতে পারে Iframe
। এখানে একটি ছোট উদাহরণ:
মূল পৃষ্ঠা:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}
আইফ্রেমে কোড:
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *
আপডেট:
সুরক্ষা নোট:
*
অন্য উইন্ডোটির নথিটি কোথায় থাকা উচিত তা যদি আপনি জানেন তবে সর্বদা একটি নির্দিষ্ট টার্গেটঅরগিন সরবরাহ করুন । নির্দিষ্ট লক্ষ্য সরবরাহ করতে ব্যর্থ হওয়ায় আপনি যে কোনও আগ্রহী দূষিত সাইটে প্রেরিত ডেটা প্রকাশ করেন ( জেলামিটাইসেইনের মন্তব্য )।
তথ্যসূত্র:
এটি আমার বিদ্যমান উত্তরের সাথে সম্পর্কিত না হওয়ায় এটি পৃথক উত্তর হিসাবে পোস্ট করেছি।
এই ইস্যুটি সম্প্রতি একটি সাবডোমেইন রেফারেন্স করে একটি আইফ্রেমে থেকে পিতামাতাকে অ্যাক্সেসের জন্য আবার ক্রপ করা হয়েছিল এবং বিদ্যমান ফিক্সগুলি কার্যকর হয়নি।
এবার উত্তরটি হ'ল পিতামাতার ডকুমেন্ট.ডোমেন এবং ইফ্রেমে একই হতে হবে। এটি একই উত্সের নীতি চেকগুলিকে বোকা বানাবে ঠিক একই ডোমেনে সহ-অস্তিত্বের চিন্তা বানাবে (সাবডোমেনগুলি একটি পৃথক হোস্ট হিসাবে বিবেচিত হয় এবং একই উত্স নীতি চেক ব্যর্থ হয়)।
<head>
প্যারেন্ট ডোমেনের সাথে মেলে মেলে আইফ্রেমে পৃষ্ঠার নীচে সন্নিবেশ করান (আপনার ডক্টাইপের জন্য সামঞ্জস্য করুন)।
<script>
document.domain = "mydomain.com";
</script>
দয়া করে নোট করুন যে এটি লোকালহোস্ট বিকাশে একটি ত্রুটি ফেলবে, সুতরাং ত্রুটি এড়াতে নিম্নলিখিতগুলির মতো একটি চেক ব্যবহার করুন:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
example.com
iframe হয় abc.example.com
, তবে পিতা বা মাতা এবং iframe উভয়কেই কল করতে হবেdocument.domain = "example.com"
তুমি ব্যবহার করতে পার
window.top
নিম্নলিখিত দেখুন।
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>
abc()
শুধুমাত্র কাজ করবে যদি function abc()
ঘোষণা করেন iframe এ যেমন পিতা বা মাতা পৃষ্ঠাতে বিরোধিতা। window.top.abc()
মূল নথিতে আইফ্রেমে বিচ্ছেদ ঘটে।
যাদের এটি প্রয়োজন তাদের জন্য আরও একটি সংযোজন। এশ ক্লার্কের সমাধানটি কার্যকর হয় না যদি তারা বিভিন্ন প্রোটোকল ব্যবহার করে থাকে তবে নিশ্চিত হয়ে নিন যে আপনি যদি এসএসএল ব্যবহার করছেন তবে আপনার আইফ্রেমে এসএসএলও ব্যবহার করছেন অথবা এটির কার্যকারিতাটি ভেঙে যাবে। তার সমাধানটি ডোমেনের জন্য নিজেই কাজ করেছিল, সুতরাং এর জন্য ধন্যবাদ।
সাবডোমেনগুলির জন্য অ্যাশ ক্লার্কের দেওয়া সমাধানটি দুর্দান্ত কাজ করে তবে দয়া করে নোট করুন যে আপনাকে ডকুমেন্ট.ডোমেন = "মাইডোমেন ডট কম" অন্তর্ভুক্ত করতে হবে; লিঙ্কে একই উত্স নীতি চেক হিসাবে উল্লিখিত হিসাবে, উভয়ই iframe পৃষ্ঠার প্রধান এবং মূল পৃষ্ঠার প্রধান
জাভাস্ক্রিপ্ট ডিওএম অ্যাক্সেসের জন্য প্রয়োগ করা একই মূল উত্স নীতিটির একটি গুরুত্বপূর্ণ বর্ধিতকরণ (তবে একই উত্সের চেকগুলির অন্যান্য স্বাদের জন্য নয়) হ'ল দুটি সাধারণ সাইট উচ্চ স্তরের ডোমেন ভাগ করে "একই হোস্ট" ব্যর্থ হওয়া সত্ত্বেও যোগাযোগ করতে পারে পারস্পরিকভাবে তাদের নিজ নিজ ডকুমেন্ট.ডোমেন ডোম সম্পত্তি তাদের বর্তমান হোস্ট নামের একই যোগ্য, ডান-হাতের খণ্ডে সেট করে পরীক্ষা করে দেখুন। উদাহরণস্বরূপ, যদি http://en.example.com/ এবং http://fr.example.com/ উভয়ই "example.com" তে ডকুমেন্ট.ডোমেন সেট করে তবে তারা সেই বিন্দু থেকে একই-উত্স হিসাবে বিবেচিত হবে ডিওএম কারসাজির উদ্দেশ্য।
document.domain
?
localhost
বা মেশিনের আইপি ঠিকানা হবে (সাধারণত 127.0.0.1
), ইউআরএল ঠিকানা বারে কী আছে তার উপর নির্ভর করে।
প্যারেন্ট.এবসি () সুরক্ষার কারণে কেবল একই ডোমেনে কাজ করবে। আমি এই কার্যকারিতাটি চেষ্টা করেছিলাম এবং আমার কাজটি পুরোপুরি কার্যকর হয়েছিল।
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>
আশাকরি এটা সাহায্য করবে. :)
ফায়ারফক্স এবং ক্রোমের সাহায্যে আপনি এটি ব্যবহার করতে পারেন:
<a href="whatever" target="_parent" onclick="myfunction()">
যদি মাইফ্যাঙ্কশন উভয়ই iframe এবং পিতামাতায় উপস্থিত থাকে তবে পিতামাতাকে ডাকা হবে।
যদিও এই সমাধানগুলির কয়েকটি কার্যকর হতে পারে তবে এর মধ্যে কেউই সেরা অনুশীলনগুলি অনুসরণ করে না। অনেকগুলি বিশ্বব্যাপী ভেরিয়েবলগুলি বরাদ্দ করে এবং আপনি নিজেকে একাধিক প্যারেন্ট ভেরিয়েবল বা ফাংশনে কল করতে দেখবেন, যাতে একটি বিশৃঙ্খল, দুর্বল নেমস্পেসের দিকে নিয়ে যায়।
এটি এড়াতে, একটি মডিউল প্যাটার্ন ব্যবহার করুন। মূল উইন্ডোতে:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);
তারপরে, iframe এ:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};
এটি ক্রকফোর্ডের আংশিক পাঠ্য "জাভাস্ক্রিপ্ট: দ্য গুড পার্টস" এর উত্তরাধিকার অনুচ্ছেদে বর্ণিত নিদর্শনগুলির মতো। জাভাস্ক্রিপ্টের সেরা অনুশীলনের জন্য আপনি ডাব্লু 3 এর পৃষ্ঠায় আরও শিখতে পারেন। https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals