কীভাবে ইফ্রেমে এবং পিতামাতার সাইটের মধ্যে যোগাযোগ করবেন?

Question

আইফ্রেমে ওয়েবসাইটটি একই ডোমেনে অবস্থিত নয় তবে উভয়ই আমার এবং আমি iframeএবং পিতামাতার সাইটের মধ্যে যোগাযোগ করতে চাই । এটা কি সম্ভব?

Answer 1

বিভিন্ন ডোমেনের সাথে, পদ্ধতিগুলিতে কল করা বা সরাসরি ইফ্রামের সামগ্রী নথিতে অ্যাক্সেস করা সম্ভব নয়।

আপনাকে ক্রস-ডকুমেন্ট মেসেজিং ব্যবহার করতে হবে ।

উদাহরণস্বরূপ শীর্ষ উইন্ডোতে:

 myIframe.contentWindow.postMessage('hello', '*');

এবং iframe এ:

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

আপনি যদি iframe থেকে প্যারেন্ট উইন্ডোতে বার্তা পোস্ট করছেন

window.top.postMessage('hello', '*')

Comments

আপনাকে ধন্যবাদ, তবে দুর্ভাগ্যক্রমে এটি পুরানো ব্রাউজারগুলিতে কাজ করে না।

— ড্যানি ফক্স

পিতা বা মাতা ইন: window.onmesage = function()...। window.top.postMessage('hello', '*')

— ইফ্রেমে

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

— স্টিজন ডি উইট

একটি ভাল অনুশীলন হিসাবে, কখনও আপনার টার্গেটের জন্য '*' ব্যবহার করবেন না। প্রকৃতপক্ষে, এমডিএন বলেছে - "সর্বদা একটি নির্দিষ্ট টার্গেটআরগিন সরবরাহ করুন, * নয়, যদি আপনি জানেন যে অন্য উইন্ডোটির নথিটি কোথায় থাকা উচিত a

— rodwa

আমরা এমনকি window.frames[index]শিশু ফ্রেম ( <iframe>, <object>, <frame>) এর সমতুল্য পেতে ব্যবহার করতে পারি getElementsByTagName("iframe")[index].contentWindow। আইফ্রেমস থেকে পেন্টেন্ট উইন্ডো অবজেক্ট পেতে, ব্যবহার করা ভাল window.parent, window.topশীর্ষ পিতা বা মাতা উইন্ডোর প্রতিনিধিত্ব হিসাবে

— সুব্রতো

Answer 2

এটি অবশ্যই এখানেই থাকবে, কারণ 2012 থেকে গৃহীত উত্তর

2018 এবং আধুনিক ব্রাউজারগুলিতে আপনি আইফ্রেমে থেকে প্যারেন্ট উইন্ডোতে একটি কাস্টম ইভেন্ট পাঠাতে পারেন।

আইফ্রেম:

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

পিতা বা মাতা:

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

পিএস: অবশ্যই, আপনি একইভাবে বিপরীত দিকের ইভেন্টগুলি পাঠাতে পারেন।

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Comments

হ্যালো, এটি করার জন্য আমাকে কি একই ডোমেনে থাকতে হবে?

— গিলাইম হারারি

stackoverflow.com/questions/25098021/…

— কিউ মধ্যে অপরিচিত

এটি লক্ষ করা উচিত যে dispatchEventসমস্ত বড় ব্রাউজারে সমর্থিত। আইই 9 এটির প্রথম সংস্করণ ছিল, সুতরাং বেশিরভাগ ওএস এখন এটি নিয়ে কাজ করে। caniuse.com/#search=dispatchEvent

— ড্যান অ্যাটকিনসন

আমি এই পদ্ধতির সাথে পিতা-মাতার কাছ থেকে ইফ্রামে যোগাযোগ করতে পারছি না।

— অ্যাভান

হ্যাঁ আমি এটি কোনওভাবেই কাজ করতে পারছি না, iframe js প্যারেন্ট উইন্ডোটির পরে লোড হচ্ছে তাই প্রেরণ করার সময় এটির প্রাপ্তি নেই। এটি কেবলমাত্র আমার জন্য পিতা-মাতার কাছে ইফ্রেমে থেকে কাজ করে।

— রডটেক

Answer 3

এই লাইব্রেরিটি এইচটিএমএল 5 পোস্টমেসেজ এবং লিগ্যাসি ব্রাউজারগুলিকে পুনরায় আকার + হ্যাশ https://github.com/ternarylabs/porthole সমর্থন করে

সম্পাদনা করুন: এখন ২০১৪-এ, postMessageআই 6 / usage ব্যবহার বেশ কম, আই 8 এবং সর্বোপরি সমর্থন তাই এখন আমি এটি ব্যবহার করার পরামর্শ দিই।

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Comments

আইভি 8/9 কেবলমাত্র স্ট্রিংগুলি ক্যানিউজকে সমর্থন করে এই সতর্কতার সাথে //#search=postmessage (পরিচিত সমস্যাগুলি দেখুন)

— হ্যারি

আপনার ইভেন্টের বিষয়গুলিকে জসন-এ এনকোড করে এবং অন্যদিকে ডিকোড করে এটিকে ঘিরে কাজ করা যেতে পারে।

— কোডওয়ান্ডার

Answer 4

window.topসম্পত্তি আপনার যা প্রয়োজন দিতে সক্ষম হওয়া উচিত।

যেমন

alert(top.location.href)

Http://cross-browser.com/talk/inter-frame_comm.html দেখুন

Comments

যদি ইফরাম একই ডোমেনে না থাকে তবে তিনি এর পিতামাতাকে অ্যাক্সেস করতে পারবেন না।

— Andreas Köberle

Answer 5

আপনি ব্যবহার করতে পারেন

postMessage(message, '*');

Answer 6

event.source.window.postMessageপ্রেরকের কাছে ফেরত পাঠাতে ব্যবহার করুন ।

ইফ্রামে থেকে

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

তারপরে পিতামাতার কাছ থেকে ফিরে বলুন।

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}