একটি iframe থেকে প্যারেন্ট উইন্ডো ফাংশন কল করা


281

আমি একটি iframe থেকে একটি প্যারেন্ট উইন্ডো জাভাস্ক্রিপ্ট ফাংশন কল করতে চাই।

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" href="#">Call Me</a>
</iframe>

1
আমি এখনই কিছু দেখাতে পারব না (2016), আমি জানি না যে পুরানো বোর
কোনওটি

উত্তর:


438
<a onclick="parent.abc();" href="#" >Call Me </a>

উইন্ডো.প্যারেন্ট দেখুন

বর্তমান উইন্ডো বা সাবফ্রেমের পিতামাতার একটি রেফারেন্স প্রদান করে।

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

যখন একটি উইন্ডো একটি ইন লোড হয় <iframe>, <object>অথবা <frame>তার পিতা বা মাতা উপাদান উইন্ডোতে এম্বেডিং সঙ্গে উইন্ডো।


17
সর্বদা অ্যাকাউন্টে বিবেচনা করুন যে প্যারেন্ট ডকুমেন্ট এবং আইফ্রেমে ডকুমেন্টটি অবশ্যই প্রোটোকল এবং ডোমেন নামের সাথে মেলে। যদি এটি না ঘটে থাকে তবে আপনি একটি সুরক্ষা ত্রুটি পাবেন কারণ এটি ক্রস ডোমেন স্ক্রিপ্টিংকে অনুমতি দেয় না।
a4bike

আমি শুধু ভাবছি যে দু'জনকে alertডাকা হবে; পিতা-মাতার alertফাংশন বা আইফ্রেমের alertফাংশন, ক্ষেত্রে parent.abc();যদি আইফ্রেমে ডাকা হয়?
প্রখর মিশ্র

পছন্দ করুন পিতামাতার অর্থ পিতামাতা।
সাহু ভি কুমার

3
@ এ 4 বাইকের মতো পরিস্থিতিগুলির জন্য, window.postMessage()(বা window.parent.postMessage()) বিদ্যমান। অ্যান্ড্রি উত্তরটি পরীক্ষা করে দেখুন
Fr0zenFyr

81

এটি খুব বেশি কেন কাজ করে না তা আমাকে সম্প্রতি খুঁজে বের করতে হয়েছিল।

যে জাভাস্ক্রিপ্টটি আপনি বাচ্চা ইফ্রামের কাছ থেকে কল করতে চান তা পিতামাতার মাথায় থাকা দরকার। এটি যদি শরীরে থাকে তবে স্ক্রিপ্টটি বিশ্বব্যাপী সুযোগে উপলভ্য নয়।

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="parent.abc();" href="#">Click Me</a>
    </iframe>
</body>

আশা করি এটি যে কেউ এই সমস্যা নিয়ে আবার হোঁচট খাচ্ছে সহায়তা করে।


1
এই পোস্টে উল্লিখিত কোনও কৌশলই Chrome এ কাজ করে না। এর কোন সমাধান?
কুমার কুশ

3
যদি আমি সঠিকভাবে মনে রাখি, তবে যদি এই আইফ্রেমে পিতামাতার কাছে আলাদা ডোমেন থাকে তবে আমি এটি প্রত্যাশা অনুযায়ী কাজ করতে পারিনি। দুঃখিত এটি কোনও সমাধান নয়, তবে এটি কেন কাজ করছে না তা তা ব্যাখ্যা করতে পারে।
অ্যাশ ক্লার্ক

1
হ্যাঁ. আমি জানি যে এটি বিভিন্ন ডোমেনের কারণে, তবে এটির চারপাশে কাজ করার কোনও উপায় নেই?
কুমার কুশ

1
আমি সবেমাত্র পোস্ট করেছি যা আপনার সমস্যার সমাধান হতে পারে। অন্য উত্তরটি একবার দেখুন।
অ্যাশ ক্লার্ক

1
একই উত্স নীতি নির্ধারণের নিয়ম অনুসারে (দেখুন: en.wikedia.org/wiki/… ), সাবডোমেনগুলি একটি ডোমেনের সাবডোমেনের আলাদা হোস্টনাম হিসাবে বিবেচিত হয়। আপনি যদি ইতিমধ্যে না থাকেন তবে আপনি কেবল সাবডোমনে ডকুমেন্ট.ডমিন সেট করার চেষ্টা করতে পারেন?
অ্যাশ ক্লার্ক

72

Window.postMessage ()

এই পদ্ধতিটি নিরাপদে 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 *

আপডেট:

সুরক্ষা নোট:

*অন্য উইন্ডোটির নথিটি কোথায় থাকা উচিত তা যদি আপনি জানেন তবে সর্বদা একটি নির্দিষ্ট টার্গেটঅরগিন সরবরাহ করুন । নির্দিষ্ট লক্ষ্য সরবরাহ করতে ব্যর্থ হওয়ায় আপনি যে কোনও আগ্রহী দূষিত সাইটে প্রেরিত ডেটা প্রকাশ করেন ( জেলামিটাইসেইনের মন্তব্য )।

তথ্যসূত্র:


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

1
ধন্যবাদ! আমাকে সর্বদা এক ঘন্টা বা তারও বেশি সময় ব্যয় করতে হবে এবং কীভাবে জটিল, ভার্জোজ উদাহরণ দিয়ে বার্তা পাঠানো যায় তা নিয়ে গবেষণা করতে হবে। এটি 60 সেকেন্ডে কাজ করেছে। ধন্যবাদ এবং বিন্দু একটি উদাহরণের জন্য ধন্যবাদ।
র্যান্ডালটো

2
যে উত্থাপন মূল্য (থেকে এমডিএন ওয়েব ডক্স থেকে ) : অন্য উইন্ডোর ডকুমেন্টটি কোথায় থাকা উচিত তা আপনি যদি জানেন তবে সর্বদা একটি নির্দিষ্ট টার্গেটআরগিন সরবরাহ করুন। নির্দিষ্ট টার্গেট সরবরাহ করতে ব্যর্থ হওয়ায় আপনি যে কোনও আগ্রহী দূষিত সাইটে আপনার পাঠানো ডেটা প্রকাশ করে
জেলিমিটাইজেটেন

20

এটি আমার বিদ্যমান উত্তরের সাথে সম্পর্কিত না হওয়ায় এটি পৃথক উত্তর হিসাবে পোস্ট করেছি।

এই ইস্যুটি সম্প্রতি একটি সাবডোমেইন রেফারেন্স করে একটি আইফ্রেমে থেকে পিতামাতাকে অ্যাক্সেসের জন্য আবার ক্রপ করা হয়েছিল এবং বিদ্যমান ফিক্সগুলি কার্যকর হয়নি।

এবার উত্তরটি হ'ল পিতামাতার ডকুমেন্ট.ডোমেন এবং ইফ্রেমে একই হতে হবে। এটি একই উত্সের নীতি চেকগুলিকে বোকা বানাবে ঠিক একই ডোমেনে সহ-অস্তিত্বের চিন্তা বানাবে (সাবডোমেনগুলি একটি পৃথক হোস্ট হিসাবে বিবেচিত হয় এবং একই উত্স নীতি চেক ব্যর্থ হয়)।

<head>প্যারেন্ট ডোমেনের সাথে মেলে মেলে আইফ্রেমে পৃষ্ঠার নীচে সন্নিবেশ করান (আপনার ডক্টাইপের জন্য সামঞ্জস্য করুন)।

<script>
    document.domain = "mydomain.com";
</script>

দয়া করে নোট করুন যে এটি লোকালহোস্ট বিকাশে একটি ত্রুটি ফেলবে, সুতরাং ত্রুটি এড়াতে নিম্নলিখিতগুলির মতো একটি চেক ব্যবহার করুন:

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
} 

এবং লোকালহোস্টে এটি পরীক্ষা করার কী আছে? এর জন্য কোন কর্মসূচী?
উমেশ અવস্তি

দেখুন: "দয়া করে নোট করুন যে এটি লোকালহোস্ট বিকাশে একটি ত্রুটি ফেলবে, সুতরাং ত্রুটি এড়াতে নিম্নলিখিতগুলির মতো একটি চেক ব্যবহার করুন"
অ্যাশ ক্লার্ক

2
এটি লক্ষণীয় যে (কমপক্ষে গুগল ক্রোমে) পিতামাতা এবং শিশু উভয়ই ডকুমেন্ট.ডোমেন সেট করতে হবে! এমনকি তাদের মধ্যে একটি ইতিমধ্যে "সঠিক" থাকলেও! উদাহরণ: পিতামাতা হ'ল example.comiframe হয় abc.example.com, তবে পিতা বা মাতা এবং iframe উভয়কেই কল করতে হবেdocument.domain = "example.com"
KillerX

হ্যাঁ এটি সঠিক, আমি এখানে একটি টাইপো তৈরি করেছি: "আইফ্রেমে পৃষ্ঠাটি একই হতে হবে।" "পৃষ্ঠা এবং iframe একই হতে হবে" হওয়া উচিত। ..... ধন্যবাদ!
অ্যাশ ক্লার্ক

যদি () এর জন্য আপনি কেবল (ডকুমেন্ট.ডোমেন! = "মাইডোমেন ডটকম") ব্যবহার করবেন না কেন? আমি বিভ্রান্ত হয়েছি, <script> কি প্যারেন্ট উইন্ডোতে বা আইফ্রেমে যায়? এছাড়াও, সেটিংসটিও সেট করে?
আইফ্রেমে

18

তুমি ব্যবহার করতে পার

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()মূল নথিতে আইফ্রেমে বিচ্ছেদ ঘটে।
শান কেন্ডেল

3

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


2

সাবডোমেনগুলির জন্য অ্যাশ ক্লার্কের দেওয়া সমাধানটি দুর্দান্ত কাজ করে তবে দয়া করে নোট করুন যে আপনাকে ডকুমেন্ট.ডোমেন = "মাইডোমেন ডট কম" অন্তর্ভুক্ত করতে হবে; লিঙ্কে একই উত্স নীতি চেক হিসাবে উল্লিখিত হিসাবে, উভয়ই iframe পৃষ্ঠার প্রধান এবং মূল পৃষ্ঠার প্রধান

জাভাস্ক্রিপ্ট ডিওএম অ্যাক্সেসের জন্য প্রয়োগ করা একই মূল উত্স নীতিটির একটি গুরুত্বপূর্ণ বর্ধিতকরণ (তবে একই উত্সের চেকগুলির অন্যান্য স্বাদের জন্য নয়) হ'ল দুটি সাধারণ সাইট উচ্চ স্তরের ডোমেন ভাগ করে "একই হোস্ট" ব্যর্থ হওয়া সত্ত্বেও যোগাযোগ করতে পারে পারস্পরিকভাবে তাদের নিজ নিজ ডকুমেন্ট.ডোমেন ডোম সম্পত্তি তাদের বর্তমান হোস্ট নামের একই যোগ্য, ডান-হাতের খণ্ডে সেট করে পরীক্ষা করে দেখুন। উদাহরণস্বরূপ, যদি http://en.example.com/ এবং http://fr.example.com/ উভয়ই "example.com" তে ডকুমেন্ট.ডোমেন সেট করে তবে তারা সেই বিন্দু থেকে একই-উত্স হিসাবে বিবেচিত হবে ডিওএম কারসাজির উদ্দেশ্য।


হ্যাঁ এটি সঠিক, আমি এখানে একটি টাইপো তৈরি করেছি: "আইফ্রেমে পৃষ্ঠাটি একই হতে হবে।" "পৃষ্ঠা এবং iframe একই হতে হবে" হওয়া উচিত। ..... ধন্যবাদ!
অ্যাশ ক্লার্ক

স্থানীয় কম্পিউটারে ফাইল চালানো সম্পর্কে কীভাবে? এর মান কী document.domain?
র‌্যাপটার

এটি localhostবা মেশিনের আইপি ঠিকানা হবে (সাধারণত 127.0.0.1), ইউআরএল ঠিকানা বারে কী আছে তার উপর নির্ভর করে।
অ্যাশ ক্লার্ক

2

প্যারেন্ট.এবসি () সুরক্ষার কারণে কেবল একই ডোমেনে কাজ করবে। আমি এই কার্যকারিতাটি চেষ্টা করেছিলাম এবং আমার কাজটি পুরোপুরি কার্যকর হয়েছিল।

<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>

আশাকরি এটা সাহায্য করবে. :)


এটি কেবলমাত্র আইফ্রেমের নথির জন্য কোনও ব্যবহার, আপনার পিতামাতার ফর্মের নিয়ন্ত্রণগুলি উল্লেখ করতে হলে বড় জটিলতা যুক্ত করতে পারেন।
পল

1

ফায়ারফক্স এবং ক্রোমের সাহায্যে আপনি এটি ব্যবহার করতে পারেন:

<a href="whatever" target="_parent" onclick="myfunction()">

যদি মাইফ্যাঙ্কশন উভয়ই iframe এবং পিতামাতায় উপস্থিত থাকে তবে পিতামাতাকে ডাকা হবে।


এটা কাজ করে না। এখানে আমার ডেমো: dotku.github.io/tech/html/iframe/iframe_function_container.html
ওয়েইজিং

অ্যাশ ক্লার্কের বক্তব্য অনুসারে, যে জাভাস্ক্রিপ্টটি আপনি শিশু থেকে ইফ্রেমে কল করতে চান তা পিতামাতার মাথায় থাকা দরকার।
স্নোফ্লেক

গৃহীত উত্তরের জন্য স্ক্রিপ্টটি মাথায় রাখতে হবে না। এই সমাধানটিরও এখন আর স্ক্রিপ্ট মাথায় থাকার প্রয়োজন নেই কিনা তা আমি পরীক্ষা করিনি।
গাই শালনাট

0

যদিও এই সমাধানগুলির কয়েকটি কার্যকর হতে পারে তবে এর মধ্যে কেউই সেরা অনুশীলনগুলি অনুসরণ করে না। অনেকগুলি বিশ্বব্যাপী ভেরিয়েবলগুলি বরাদ্দ করে এবং আপনি নিজেকে একাধিক প্যারেন্ট ভেরিয়েবল বা ফাংশনে কল করতে দেখবেন, যাতে একটি বিশৃঙ্খল, দুর্বল নেমস্পেসের দিকে নিয়ে যায়।

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

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.