জাভাস্ক্রিপ্ট থেকে পিতা বা মাতা iframe অ্যাক্সেস কিভাবে


170

ভাল, আমার একটি আইফ্রেম আছে, যা একই ডোমেন পৃষ্ঠাতে কল করে। আমার সমস্যাটি হ'ল আমি এই অভিহিত পৃষ্ঠাটি (জাভাস্ক্রিপ্ট থেকে) থেকে এই পিতামাতা ইফ্রেমের কিছু তথ্য অ্যাক্সেস করতে চাই। আমি কীভাবে এই ইফ্রেমে অ্যাক্সেস করতে পারি?

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

সম্পাদনা: সেখানে iframes গতিশীলভাবে উত্পাদিত হয়


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

উত্তর:


138

এছাড়াও আপনি নাম এবং আইডি সমান মানগুলিতে সেট করতে পারেন

<iframe id="frame1" name="frame1" src="any.html"></iframe>

সুতরাং আপনি চাইল্ড পৃষ্ঠার অভ্যন্তরে পরবর্তী কোড ব্যবহার করতে সক্ষম হবেন

parent.document.getElementById(window.name);

16
সম্ভবত এটি সবার কাছে সুস্পষ্ট নয় তবে এই পদ্ধতির সাহায্যে আপনি পিতামাতার একটি লাইব্রেরি অবজেক্ট অ্যাক্সেস করতে পারেন (কেবলমাত্র পিতা-মাতা ইতিমধ্যে লাইব্রেরিটি লোড করেছেন)। উদাহরণ: পিতামাতার সাথে jQuery অ্যাক্সেস করুন $ ('# কিছু')
Zsolti

1
এই সমাধানটি আই 5 + সামঞ্জস্যতা কুইর্কস মোডের সাথে সামঞ্জস্যপূর্ণ।
স্লেনার

এমনকি ২০১ in সালে, এটি iframeখুব ছোট বিষয়বস্তু মুদ্রণ করে IE সমস্যা সমাধানের অংশ হিসাবে দুর্দান্ত কাজ করে । তবে কেন এটি কাজ করে? window.nameএকটি স্ট্রিং প্রদান করে। window.nameস্ট্রিং হিসাবে আইডি নামটি পাস করার চেয়ে কী ব্যবহার করা যায় যা কার্যকর হয় না?)?
কার্ল 20

3
হাই, Chrome এর 59 সঙ্গে চলে না ..: VM111: 1 Uncaught DOMException: উৎপত্তি "সঙ্গে একটি ফ্রেম অবরুদ্ধ XXX " একটি ক্রশ-অরিজিন ফ্রেম অ্যাক্সেস করা থেকে।
দিদিয়ার 68

ক্রোস একই ফোল্ডারে ফাইলগুলি ক্রস-অরিজিন হিসাবে দেখায় যদি CORS সেট করা থাকে না। তারা বলে যে এটি সুরক্ষার জন্য। সিআরএস সেট করার জন্য একটি সার্ভার প্রয়োজন। ব্যবহারকারীরা একটি সার্ভার সেট আপ করতে বা Chrome সনাক্ত করা থাকলে ব্রাউজার পরিবর্তন করতে একটি বার্তা দিন।

90

window.frameElementআপনার ফ্রেমড পৃষ্ঠা থেকে কেবল কল করুন । পৃষ্ঠাটি যদি কোনও ফ্রেমে না থাকে তবে frameElementহবে null

অন্য উপায় (একটি ফ্রেমের ভিতরে উইন্ডো উপাদান পাওয়া কম তুচ্ছ) তবে সম্পূর্ণতার জন্য:

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

2
ধন্যবাদ! আইই 6+, এফএফ এবং ক্রোমে কাজ করে!
rustyx

11
window.frameElementnullউইন্ডো এবং আইফ্রেমে পৃথক ডোমেন থাকে, অর্থাৎ ক্রস-অরিজিন মেসেজিং উপস্থিত হয় returns
কিওয়ার্টি

@ কিওয়ার্টি আপনি কি কোন সমাধান খুঁজে পেয়েছেন?
অজয় পাতিদার

@ অজয়পাতিদার আমার মনে হয় আমি হাল ছেড়ে দিয়েছি। :(
কিওয়ার্টি

78

আমি পোস্টমেসেজ এপিআই ব্যবহার করার পরামর্শ দেব ।

আপনার iframe এ, কল করুন:

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

পৃষ্ঠায় আপনি ইফ্রেমে অন্তর্ভুক্ত করছেন আপনি এই জাতীয় ইভেন্টের জন্য শুনতে পারেন:

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

যাইহোক, অন্যান্য উইন্ডোজগুলিতে কল করাও সম্ভব, এবং কেবল আইফ্রেমেও নয়।

জন রেসিগস ব্লগে পোস্টম্যাসেজ এপিআই সম্পর্কে আরও পড়ুন এখানে


7
আমি মনে করি এটি স্পষ্টতই সেরা উত্তর, <iframe>বিষয়বস্তুগুলিতে পিতামাতা এবং তদ্বিপরীত সম্পর্কে কিছু জানতে হবে না। তাদের কেবলমাত্র সাধারণ বার্তার চুক্তি মানতে হবে। অসাধারণ!
এমফাইনিস

1
<iframe> টি এখনও পিতামাতার ডোমেন জানতে হবে, তাই না?
হোমার জোডিসি

1
@ হোমরজডিসি পিতামাতার ডোমেনটি কেবল সুরক্ষা ব্যবস্থা হিসাবে উপলব্ধ, যদি না জানা থাকে তবে আপনি সেট করতে পারেন '*'
আমির আলী আকবরী

'*'ক্লায়েন্ট ব্যবহার করুন। অন্য সমস্ত সমাধান ক্রম ব্রাউজারে ক্লায়েন্ট ফোল্ডারে ফাইলগুলি একই অরিজিন হিসাবে বিবেচনা করে ত্রুটি দেয় কারণ একটি সার্ভার সেট আপ করা হয়নি। এটি সর্বোত্তম এবং একমাত্র সমাধান: ডাইন

30

পুরানো প্রশ্ন, তবে আমি কেবল এই একই সমস্যাটি পেয়েছি এবং iframe পাওয়ার একটি উপায় খুঁজে পেয়েছি। এটি কেবল প্যারেন্ট উইন্ডোজের ফ্রেমের [] অ্যারের মাধ্যমে পুনরাবৃত্তি করার এবং প্রতিটি ফ্রেমের সামগ্রী উইন্ডোটি যে উইন্ডোটিতে আপনার কোডটি চলছে তার বিপরীতে পরীক্ষা করার বিষয়। উদাহরণ:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

বা, jQuery ব্যবহার করে:

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

এই পদ্ধতিটি প্রতিটি আইফ্রেমে একটি আইডি নির্ধারণ করে সংরক্ষণ করে, যা গতিশীলভাবে তৈরি হওয়ার কারণে আপনার ক্ষেত্রে এটি ভাল। আমি আরও সরাসরি কোনও উপায় খুঁজে পাইনি, যেহেতু উইন্ডো.প্যারেন্ট ব্যবহার করে আপনি আইফ্রেমে উপাদানটি পেতে পারেন না - এটি সরাসরি প্যারেন্ট উইন্ডো উপাদানটিতে যায় (আইফ্রেমে এড়িয়ে যাওয়া) ipping সুতরাং আইডি ব্যবহার করতে না চাইলে এগুলির মধ্য দিয়ে লুপিংয়ের একমাত্র উপায় মনে হয়।


1
আপডেট: এটি ঠিক যেমন বিজ্ঞাপন হিসাবে কাজ করে নি, এবং আমাকে কন্টেন্টউইন্ডো.ডোকমেন্ট === দস্তাবেজটি ব্যবহার করতে হয়েছিল। কেন জানি না। কিছু ব্রাউজারে আমি কন্টেন্ট ডকুমেন্ট ব্যবহার করেছি। ভাল, আমি যে পছন্দ!
ক্রিস্টোফ

1
দুঃখিত, স্বীকারোক্তি দিয়েছি আমি এটি কেবল ফায়ারফক্সে পরীক্ষা করেছি। :) তবে আমি একাধিক ব্রাউজারে jQuery পদ্ধতি এবং সামগ্রী উইন্ডো ব্যবহার করে সাফল্য পেয়েছি।
উপাদান_1593939

1
আপডেট: আমি জানতে পেরেছি যে আপনি উইন্ডো.ফ্রেমএলিমেন্টও ব্যবহার করতে পারেন তবে কোন ব্রাউজারগুলি এটি সমর্থন করে তা আমি নিশ্চিত নই।
ক্রিস্টোফ

2
আমি মনে করি না এই ধরণের জিনিসগুলি আর কাজ করে না; আপনি ক্রস-অরিজিন ত্রুটি পান।
অ্যান্ড্রু মাও

@ অ্যান্ড্রুমাও প্রশ্নটি একই মূল নথির বিষয়ে, সুতরাং ক্রস-অরিজিন সমস্যাগুলি পাওয়ার কোনও কারণ নেই।
ক্রিস্টোফ

21

আপনি parentপ্যারেন্ট পৃষ্ঠায় অ্যাক্সেস ব্যবহার করতে পারেন । সুতরাং একটি ফাংশন অ্যাক্সেস এটি হতে হবে:

var obj = parent.getElementById('foo');

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

এখনও ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে " স্থানীয়-স্থানীয় হোস্ট: 8000 " সহ "উত্স সহ একটি ফ্রেম ব্লক করুন" get
ব্যবহারকারী 2568374

13

একবার আইফ্রেমের আইডি সেট হয়ে গেলে আপনি নীচের চিত্রের মতো অভ্যন্তরীণ নথি থেকে iframe অ্যাক্সেস করতে পারবেন।

var iframe = parent.document.getElementById(frameElement.id);

আইই, ক্রোম এবং এফএফ এ ভাল কাজ করে।


এটি করার একটি বিভ্রান্তিকর উপায় মনে হচ্ছেvar iframe = frameElement
ওরিওল

ফ্রেমএলিমেন্ট বর্তমান উইন্ডো প্রসঙ্গে আইটেমটি রিটার্ন করে, তবে প্যারেন্ট.ডোকমেন্ট.জেট এলিমেন্টবাইআইডি (ফ্রেমইলেটমেন্ট.আইডি) প্যারেন্ট উইন্ডো প্রসঙ্গে আইটেমটি রিটার্ন করে, আপনি ফ্রেমএলিমেন্ট সহ প্যারেন্ট উইন্ডোটির জাভাস্ক্রিপ্ট ফাংশন পরিচালনা করতে পারবেন না, এটি জেসফিডেলে চেষ্টা করে দেখুন এবং আপনি যদি উদাহরণস্বরূপ দিতে পারেন তবে ।
আকাশ কাভা

6

হয়তো শুধু ব্যবহার

window.parent

কলিং ফ্রেম / উইন্ডোজ পেতে আপনার iframe এ। আপনার যদি একাধিক কলিং ফ্রেম থাকে তবে আপনি ব্যবহার করতে পারেন

window.top

3

এটি চেষ্টা করুন, আপনার পিতামাতার ফ্রেমে আপনাকে এই জাতীয় আইফ্রেমেস সেট আপ করুন:

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

নোট করুন যে প্রতিটি ফ্রেমের আইডিটি এসআরসি-তে অ্যাঙ্কর হিসাবে পাস করা হয়।

তারপরে আপনার অভ্যন্তরীণ এইচটিএমএল এ অবস্থানের মাধ্যমে লোড হওয়া ফ্রেমের আইডিটি আপনি অ্যাক্সেস করতে পারবেন:

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

তারপরে আপনি iframe এর ভিতরে থেকে iframe ট্যাগটি অ্যাক্সেস করতে প্যারেন্ট.ডোকমেন্ট.সেটমেন্ট বিআইআইডি () অ্যাক্সেস করতে পারবেন


হ্যাঁ, এটি সর্বাধিক যৌক্তিক সমাধান হতে পারে তবে কখনও কখনও আমাকে আইফ্রেমের সিআরসি পরিবর্তন করতে হবে .. এবং এই হ্যাশটি বা প্যারামিটারটি প্রতিটি অনুরোধটি পাস করা ভাল নয় ..
জোসে লিয়াল

কেন প্রতিবার হ্যাশ পাস করা খারাপ? এটি কেবল সার্ভার নয়, ব্রাউজারের কাছে দৃশ্যমান এবং এটি কোনও প্যারামিটারের মতো ক্যাশে প্রভাবিত করে না।
মার্ক পোর্টার

-1
// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.