javascript - পিতামাতার পৃষ্ঠা থেকে একটি আইফ্রেমে জাভাস্ক্রিপ্ট কোড আমন্ত্রণ




html iframe (12)

মূলত, আমার একটি iframe একটি পৃষ্ঠাতে এমবেড আছে এবং iframe কিছু JavaScript রুটিন থাকে যা আমাকে প্যারেন্ট পৃষ্ঠা থেকে আহ্বান করতে হবে।

এখন বিপরীতটি বেশ সহজ, কারণ আপনাকে কেবল parent.functionName() কল করতে হবে, তবে দুর্ভাগ্যবশত, আমার ঠিক বিপরীত প্রয়োজন।

অনুগ্রহ করে মনে রাখবেন যে আমার সমস্যা iframe উত্স URL পরিবর্তন করছে না, তবে iframe সংজ্ঞায়িত একটি ফাংশনকে আহ্বান iframe

https://code.i-harness.com


IFRAME frames[] সংগ্রহ করা উচিত। ভালো কিছু ব্যবহার করুন

frames['iframeid'].method();

Quirksmode এই একটি পোস্ট ছিল।

যেহেতু পৃষ্ঠাটি এখন ভাঙা হয়েছে, এবং archive.org এর মাধ্যমে শুধুমাত্র অ্যাক্সেসযোগ্য, আমি এখানে এটি পুনঃপ্রবর্তন করেছি:

আইফ্রেমগুলি

এই পৃষ্ঠায় আমি তাদের যে পৃষ্ঠা থেকে আইফ্রেমগুলি অ্যাক্সেস করার সংক্ষিপ্ত সংক্ষিপ্ত বিবরণ দিই। আশ্চর্যজনক নয়, কিছু ব্রাউজার বিবেচনার আছে।

একটি আইফ্রেম একটি ইনলাইন ফ্রেম, একটি ফ্রেম যা তার নিজস্ব URL সহ একটি সম্পূর্ণ পৃথক পৃষ্ঠা ধারণ করে, তা সত্ত্বেও অন্য HTML পৃষ্ঠাটির ভিতরে স্থাপন করা হয়। এই ওয়েব ডিজাইন খুব চমৎকার সম্ভাবনার দেয়। সমস্যাটি আইফ্রেম অ্যাক্সেস করা, উদাহরণস্বরূপ এটিতে একটি নতুন পৃষ্ঠা লোড করা। এই পৃষ্ঠাটি কিভাবে তা ব্যাখ্যা করে।

ফ্রেম বা বস্তু?

মৌলিক প্রশ্ন হল আইফ্রেমটি ফ্রেম হিসাবে বা বস্তুর হিসাবে দেখা হয় কিনা।

  • ফ্রেম পৃষ্ঠাগুলির ভূমিকা সম্পর্কে ব্যাখ্যা করা হয়েছে, যদি আপনি ফ্রেমগুলি ব্যবহার করেন তবে ব্রাউজারটি আপনার জন্য একটি ফ্রেম অনুক্রম তৈরি করে (শীর্ষ। top.frames[1].frames[2] এবং এরকম)। আইফ্রেম এই ফ্রেম অনুক্রমের মধ্যে মাপসই করা হয়?
  • অথবা ব্রাউজারটি কি শুধুমাত্র অন্য বস্তুর মতো একটি আইফ্রেম দেখায়, এমন একটি বস্তু যা একটি src সম্পত্তি থাকে? এ ক্ষেত্রে এটির অ্যাক্সেসের জন্য আমাদের একটি স্ট্যান্ডার্ড document.getElementById('theiframe')) কল (যেমন document.getElementById('theiframe')) ব্যবহার করতে হবে। সাধারণ ব্রাউজারগুলিতে 'বাস্তব' (হার্ড-কোডেড) আইফ্রেমগুলিতে উভয় মতামতকে মঞ্জুরি দেয়, তবে জেনারেট করা আইফ্রেম ফ্রেম হিসাবে অ্যাক্সেস করা যাবে না।

NAME বৈশিষ্ট্য

কোনও আইফ্রেম দিতে যদি আপনি একটি id ব্যবহার করেন, এমনকি যদি আপনি একটি name গুণাবলী তৈরি করতে সবচেয়ে গুরুত্বপূর্ণ নিয়ম।

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

সর্বাধিক ব্রাউজারের ফ্রেমের অনুক্রমের আইফ্রেম অংশটি তৈরি করতে name বৈশিষ্ট্যটি প্রয়োজন। কিছু ব্রাউজার (উল্লেখযোগ্যভাবে মোজিলা) আইফ্রেমের একটি বস্তুর মতো আইফ্রেম অ্যাক্সেস করার জন্য প্রয়োজন। আইফ্রেম উভয় গুণাবলী বরাদ্দ করে আপনি আপনার অপশন খোলা রাখুন। কিন্তু name id চেয়ে অনেক বেশি গুরুত্বপূর্ণ।

প্রবেশ

আপনি একটি বস্তুর হিসাবে আইফ্রেমটি অ্যাক্সেস করুন এবং তার src পরিবর্তন করুন অথবা আপনি ফ্রেম হিসাবে আইফ্রেমটি অ্যাক্সেস করুন এবং তার location.href পরিবর্তন করুন .ref।

document.getElementById ('iframe_id')। src = 'newpage.html'; ফ্রেম ['iframe_name']। location.href = 'newpage.html'; ফ্রেম সিনট্যাক্স সামান্য পছন্দসই কারণ অপেরা 6 এটি সমর্থন করে তবে বস্তু সিনট্যাক্স নয়।

আইফ্রেম অ্যাক্সেস করা হচ্ছে

তাই একটি সম্পূর্ণ ক্রস ব্রাউজার অভিজ্ঞতা জন্য আপনি iframe একটি নাম দিতে এবং ব্যবহার করা উচিত

frames['testiframe'].location.href

বাক্য গঠন. যতদূর আমি জানি এই সবসময় কাজ করে।

নথি অ্যাক্সেস

আইফ্রেমের ভিতরে ডকুমেন্টটি অ্যাক্সেস করা খুবই সহজ, যদি আপনি name বৈশিষ্ট্যটি ব্যবহার করেন। আইফ্রেমে দস্তাবেজের লিঙ্কে সংখ্যা গণনা করতে, frames['testiframe'].document.links.length

জেনারেটেড iframes

যখন আপনি W3C DOM এর মাধ্যমে একটি আইফ্রেম তৈরি করেন তবে frames['testiframe'].location.href frames অ্যারের মধ্যে অবিলম্বে প্রবেশ করা হয় না, এবং frames['testiframe'].location.href সিনট্যাক্স সরাসরি কাজ করবে না। আইফ্রেম অ্যারের মধ্যে সক্রিয় হওয়ার আগে ব্রাউজারটি একটু সময় দরকার, সময় যা কোন স্ক্রিপ্ট চালানো হতে পারে।

document.getElementById('testiframe').src syntax সমস্ত পরিস্থিতিতে সূক্ষ্ম কাজ করে।

একটি লিঙ্কের target বৈশিষ্ট্যটি অপেরা ছাড়া আর জেনারেট আইফ্রেমগুলির সাথে কাজ করে না, যদিও আমি আমার তৈরি আইফ্রেম একটি name এবং একটি id উভয়ই প্রদান করেছি।

target সমর্থনের অভাব মানে জেনেটিক আইফ্রেমের বিষয়বস্তু পরিবর্তন করার জন্য আপনাকে অবশ্যই জাভাস্ক্রিপ্ট ব্যবহার করতে হবে, তবে যেহেতু আপনাকে প্রথমেই এটি তৈরি করতে জাভাস্ক্রিপ্টের প্রয়োজন হয়, তাই আমি এটি একটি সমস্যা হিসাবে দেখতে পাচ্ছি না।

আইফ্রেম টেক্সট টেক্সট

একটি অদ্ভুত এক্সপ্লোরার 6 শুধুমাত্র বাগ:

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


আপনার আইফ্রেমের আইডি "targetframe" এবং আপনি যে ফাংশনটি কল করতে চান তা লক্ষ্য করুন ফাংশন targetFunction() :

document.getElementById('targetFrame').contentWindow.targetFunction();

আপনি window.frames পরিবর্তে window.frames ব্যবহার করে ফ্রেমে অ্যাক্সেস করতে পারেন।

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

আমরা কোডিং থেকে উত্পন্ন আইফ্রেম থেকে প্যারেন্ট পৃষ্ঠা জাভাস্ক্রিপ্ট ফাংশন কল করতে চান তাহলে। প্রাক shadowbox বা লাইটবক্স

window.parent.targetFunction ();


উত্তর দিয়ে :

আরো শক্তির জন্য, নিম্নরূপ ব্যবহার করুন:

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

কবজ মত কাজ :)


এই উত্তরগুলির মধ্যে কয়েকটি CORS সমস্যাটির সমাধান করে না, বা আপনি যোগাযোগের জন্য কোড স্নিপেটগুলি কোথায় রাখেন তা স্পষ্ট করে না।

এখানে একটি কংক্রিট উদাহরণ। বলুন আমি মূল পৃষ্ঠার একটি বোতামে ক্লিক করতে চাই, এবং আইফ্রেমের ভিতরে কিছু করতে চাই। এখানে আমি কিভাবে এটা করতে হবে।

parent_frame.html

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

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

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

এই জন্য:

window.parent.postMessage('foo','*')

নিতিন বানসালের জবাব দিলেন ড

এবং এমনকি আরো জোরালো জন্য:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

এবং

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

পিতামাতার পৃষ্ঠায় একটি ফ্রেমের ফাংশন কল করতে নিম্নলিখিত ব্যবহার করুন

parent.document.getElementById('frameid').contentWindow.somefunction()

শুধু parent.myfunction() চেষ্টা করুন parent.myfunction()


শুধু রেকর্ডের জন্য, আমি আজ একই সমস্যাতে দৌড়াচ্ছি কিন্তু এইবার পৃষ্ঠাটি কোনও বস্তুর মধ্যে এমবেড করা হয়েছিল, আইফ্রেম নয় (এটি একটি এক্সএইচটিএম 1.1 নথি ছিল)। এখানে বস্তুগুলির সাথে এটি কীভাবে কাজ করে:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(কুৎসিত লাইন বিরতি জন্য দুঃখিত, একটি একক লাইন মাপসই করা হয়নি)


iframe কাছ থেকে একটি পিতামাতা JS ফাংশন কল করা সম্ভব, তবে iframe লোড হওয়া পিতা-মাতা এবং পৃষ্ঠা উভয়ই একই ডোমেন থেকে থাকে, যেমন abc.com, এবং উভয় একই প্রোটোকল ব্যবহার করছে, উভয়ই হয় http:// বা https://

কল নীচের উল্লিখিত ক্ষেত্রে ব্যর্থ হবে:

  1. মূল পৃষ্ঠা এবং আইফ্রেম পৃষ্ঠা বিভিন্ন ডোমেইন থেকে হয়।
  2. তারা বিভিন্ন প্রোটোকল ব্যবহার করছে, http: // এবং অন্যটি https: // এ রয়েছে।

এই সীমাবদ্ধতার যে কোনও কার্যকারিতা অত্যন্ত অনিরাপদ হবে।

উদাহরণস্বরূপ, কল্পনা করুন আমি superwinningcontest.com ডোমেইন নিবন্ধিত করেছি এবং লোকেদের ইমেলের লিঙ্ক পাঠিয়েছি। যখন তারা প্রধান পৃষ্ঠাটি লোড করে তখন আমি সেখানে কয়েকটি iframe গুলি লুকাতে পারি এবং তাদের ফেসবুক ফিড পড়তে, সাম্প্রতিক আমাজন বা পেপ্যাল ​​লেনদেনগুলি চেক করতে পারি, অথবা - যদি তারা কোনও পরিষেবা ব্যবহার করে যা যথেষ্ট নিরাপত্তা প্রয়োগ না করে - অর্থ স্থানান্তর করে তাদের অ্যাকাউন্ট। জাভাস্ক্রিপ্ট একই ডোমেইন এবং একই-প্রোটোকল সীমাবদ্ধ।


       $("#myframe").load(function() {
            alert("loaded");
        });




iframe