গতিশীলভাবে প্রদত্ত এইচটিএমএল সহ একটি আইফ্রেম তৈরি করা

148

আমি জাভাস্ক্রিপ্ট থেকে একটি iframe তৈরি করার চেষ্টা করছি এবং এটি নির্বিচারে এইচটিএমএল দিয়ে পূরণ করুন:

var html = '<body>Foo</body>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

আমি আশা করি iframeতখন বৈধ উইন্ডো এবং নথি থাকতে পারে would তবে, এটি ক্ষেত্রে নয়:

> কনসোল.লগ (iframe.contentWindow);
খালি

নিজের জন্য এটি ব্যবহার করে দেখুন: http://jsfiddle.net/TrevorBurnham/9k9Pe/

আমি কি উপেক্ষা করছি?

javascript iframe

— ট্রেভর বার্নহ্যাম
সূত্র

9

নোট করুন যে এইচটিএমএল 5 স্বয়ংক্রিয়ভাবে এটি করে একটি নতুন প্যারামিটার প্রবর্তন করেছে: w3schools.com/tags/att_iframe_srcdoc.asp একমাত্র সমস্যা ব্রাউজারের সামঞ্জস্যতা ...

— ভিনসেন্ট অডবার্ট

কোনও আইফ্রেমের ভিতরে এইচটিএমএল লাগানোর

— সিরো সান্তিলি 法轮功冠状病六四事件法轮功

121

সেট srcএকটি নতুন তৈরি iframeজাভাস্ক্রিপ্ট এইচটিএমএল পার্সার আরম্ভ না হওয়া পর্যন্ত উপাদান ডকুমেন্ট ঢোকানো হয়। এইচটিএমএল আপডেট করা হয় এবং এইচটিএমএল পার্সার আহ্বান করা হবে এবং প্রত্যাশা অনুযায়ী বৈশিষ্ট্যটি প্রক্রিয়া করা হবে।

http://jsfiddle.net/9k9Pe/2/

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);

এছাড়াও এই আপনার প্রশ্নের উত্তরটি গুরুত্বপূর্ণ যে এই ব্রাউজারের সাথে সামঞ্জস্যতার সমস্যা রয়েছে তা লক্ষ করা গুরুত্বপূর্ণ, দয়া করে ক্রস-ব্রাউজার সমাধানের জন্য @ এমএসসিআর এর উত্তরটি দেখুন।

— GillesC
সূত্র

3

এমনকি আই 10 তেও কাজ করে না। @ এমএসসিআর এর উত্তর আইই 7+ এ কাজ করে, এটি সম্ভবত পুরানো সংস্করণও।

— জেমস এম গ্রিন 18

6

তাঁর প্রশ্ন ছিল "আমি কী উপেক্ষা করছি?" এবং এটি হ'ল ইফ্রেমে নথিতে যুক্ত করা হয়নি। আমি কখনই দাবি করি না যে এটি ক্রস ব্রাউজারগুলি ছিল এবং আমি উত্তর দিয়েছিলাম যে কেউ আসলে অভিযোগ করেছে। না এটি ক্রস ব্রাউজার নয়। তবে আসুন যদি আপনি কোডের

— মানটি

1

নোটটি যে encodeURI(...)সমস্ত অক্ষরকে এনকোড করে না, তাই আপনার এইচটিএমএল এর মতো যদি বিশেষ অক্ষর থাকে তবে এটি #ভেঙে যাবে। encodeURIComponent(...)এই অক্ষরগুলি এনকোড করে। এই উত্তরটি

— রায়ান মরলোক

237

আপনার src = encodeURIকাজ করা সত্ত্বেও , আমি অন্যভাবে যেতে পারতাম:

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

যেহেতু এতে কোনও এক্স-ডোমেন বাধা নেই এবং iframeহ্যান্ডেলটির মাধ্যমে সম্পূর্ণভাবে সম্পন্ন হয়েছে , আপনি পরবর্তী সময়ে ফ্রেমের সামগ্রীগুলি অ্যাক্সেস করতে এবং পরিচালনা করতে পারেন। আপনাকে যা নিশ্চিত করতে হবে তা হ'ল, সামগ্রীগুলি রেন্ডার করা হয়েছে, যা (ব্রাউজারের ধরণের উপর নির্ভর করে) .writ কমান্ড জারি হওয়ার পরে / পরে শুরু হবে - তবে যখন close()ডাকা হয় তখন প্রয়োজন হয় না ।

কলব্যাক করার 100% সামঞ্জস্যপূর্ণ উপায় এই পদ্ধতি হতে পারে:

<html><body onload="parent.myCallbackFunc(this.window)"></body></html>

তবে, ইফ্র্যামেসের ওনলোড ইভেন্ট রয়েছে। অভ্যন্তরীণ এইচটিএমএলকে ডিওএম (জেএস) হিসাবে অ্যাক্সেস করার জন্য এখানে একটি পদ্ধতি রয়েছে:

iframe.onload = function() {
   var div=iframe.contentWindow.document.getElementById('mydiv');
};

— mschr
সূত্র

মজাদার; আমি এই কৌশলটি আগে দেখিনি। আমি জানি যে ইউআরআই এনকোডিং / ডিকোডিং একটি পারফরম্যান্স হিট যুক্ত করে, তবুও আমি এটিকে পরিবেশটিকে একমাত্র বিকল্প হিসাবে বর্ণনা করে দেখি যা srcdocসম্পত্তি সমর্থন করে না । document.writeপদ্ধতির কোনও ক্ষতি আছে কি ?

— ট্রেভর বার্নহ্যাম

1

@mschr এই পদ্ধতিটি কি এইচটিএমএল পৃষ্ঠাগুলি কোড সমর্থন করে যেখানে অন্তর্ভুক্ত এবং স্টাইলশীটগুলি পাশাপাশি লোড করা হয়? দেখুন stackoverflow.com/questions/19871886

— 1.21 gigawatts

2

মূলত, হ্যাঁ আমি বিশ্বাস করি এটি করা উচিত, সেখানে খারাপ মন্তব্য করা উচিত। কৌশলটি মূলত একটি ইনপুটেক্সটস্ট্রিম খুলবে যা আপনি ডকুমেন্ট.ওরাইটের মাধ্যমে লিখতে পারেন। পরিবর্তে, একটি সাধারণ লোডিং ওয়েবপৃষ্ঠা এটি ওয়েবসকেট-স্ট্রিমের মাধ্যমে পুনরুদ্ধার করে।

— এমএসসিআর

2

এটি ইন্টারনেট এক্সপ্লোরারে কাজ করে! আইটি এর কোনও সংস্করণে ডেটা ইউআরআইগুলি আইফ্রেমে উত্স হিসাবে ব্যবহার করা যায় না বলে এটি কার্যকর। caniuse.com/#feat=datauri

— জেসি হ্যালেট

2

আকর্ষণীয় যে এটি document.body.appendChild(iframe)কাজ করার জন্য প্রয়োজন।

— পল

14

আপনার দুর্দান্ত প্রশ্নের জন্য ধন্যবাদ, এটি আমাকে কয়েকবার ধরা দিয়েছে। ডেটাউরি এইচটিএমএল উত্স ব্যবহার করার সময়, আমি দেখতে পেলাম যে আমাকে একটি সম্পূর্ণ এইচটিএমএল ডকুমেন্ট সংজ্ঞায়িত করতে হবে।

পরিবর্তিত উদাহরণ নীচে দেখুন।

var html = '<html><head></head><body>Foo</body></html>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

<html>ট্যাগ এবং iframe.srcস্ট্রিং দিয়ে মোড়ানো এইচটিএমএল সামগ্রীটি নোট করুন ।

আইফ্রেমে উপাদানটি ডিওএম গাছকে বিশ্লেষণ করতে যুক্ত করতে হবে।

document.body.appendChild(iframe);

আপনি যদি আপনার ব্রাউজারে iframe.contentDocumentনা থাকেন তবে আপনি disable-web-securityএটি পরিদর্শন করতে পারবেন না । আপনি একটি বার্তা পাবেন

গৃহস্থালীকরণ: 'এইচটিএমএলআইফ্রেমইলেটমেন্ট' থেকে 'কন্টেন্টডোকামেন্ট' সম্পত্তিটি পড়তে ব্যর্থ হয়েছে : ক্রস-অরিজিন ফ্রেমটিতে অ্যাক্সেস করা থেকে " http: // লোকালহস্ট : 7357 " সহ একটি ফ্রেম অবরুদ্ধ করা হয়েছে ।

— kylewelsby
সূত্র

12

একটি আইফ্রেমে তৈরির জন্য বিকল্প রয়েছে যার বিষয়বস্তু HTML এর একটি স্ট্রিং: srcdoc বৈশিষ্ট্য । এটি পুরানো ব্রাউজারগুলিতে সমর্থিত নয় (তাদের মধ্যে প্রধান: ইন্টারনেট এক্সপ্লোরার এবং সম্ভবত সাফারি ?), তবে এই আচরণের জন্য একটি পলিফিল রয়েছে , যা আপনি IE এর জন্য শর্তাধীন মন্তব্য করতে পারেন বা শর্তসাপেক্ষে অলসতার জন্য has.js এর মতো কিছু ব্যবহার করতে পারেন এটি লোড করুন।

— zedd45
সূত্র

2

এর জন্য সমর্থন এখন বেশ মূলধারার (আইই সংরক্ষণ করুন)। এবং এটি অবশ্যই কনটেন্ট ডকুমেন্টে সরাসরি অ্যাক্সেস করা ভাল - বিশেষত যেহেতু যদি স্যান্ডবক্স অ্যাট্রিবিউটের সাথে ব্যবহার করা হয় তবে আপনি কন্টেন্ট ডকুমেন্টে অ্যাক্সেস করতে পারবেন না।

— কেমব্রিজমাইক

1

আমি জানি এটি একটি পুরানো প্রশ্ন তবে আমি ভেবেছিলাম যে srcdocগুণটি ব্যবহার করে আমি একটি উদাহরণ সরবরাহ করব কারণ এটি এখন ব্যাপকভাবে সমর্থিত এবং এই প্রশ্নটি প্রায়শই দেখা হয়।

srcdocবৈশিষ্ট্যটি ব্যবহার করে , আপনি এম্বেড করতে ইনলাইন এইচটিএমএল সরবরাহ করতে পারেন। srcসমর্থিত হলে এটি বৈশিষ্ট্যটিকে ওভাররাইড করে । srcঅসমর্থিত থাকলে ব্রাউজারটি বৈশিষ্ট্যে ফিরে আসবে ।

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

const iframe = document.createElement('iframe');
const html = '<body>Foo</body>';
iframe.srcdoc = html;
iframe.sandbox = '';
document.body.appendChild(iframe);

স্নিপেট প্রসারিত করুন

আপনার যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে srcdocহয় তবে আপনি অন্যান্য উত্তর থেকে অন্য পদ্ধতির একটিতে সমর্থন এবং ফলব্যাক পরীক্ষা করতে পারেন ।

function setIframeHTML(iframe, html) {
  if (typeof iframe.srcdoc !== 'undefined') {
    iframe.srcdoc = html;
  } else {
    iframe.sandbox = 'allow-same-origin';
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
  }
}

var iframe = document.createElement('iframe');
iframe.sandbox = '';
var html = '<body>Foo</body>';

document.body.appendChild(iframe);
setIframeHTML(iframe, html);

স্নিপেট প্রসারিত করুন

— frobinsonj
সূত্র

1

ইউআরএল পন্থাটি কেবলমাত্র ছোট এইচটিএমএল ফ্রেজেমেন্টের জন্য কাজ করবে। আরও দৃ approach় পদ্ধতির হ'ল কোনও ব্লব থেকে কোনও অবজেক্টের ইউআরএল উত্পন্ন করা এবং এটি গতিশীল ইফ্রেমের উত্স হিসাবে ব্যবহার করা।

const html = '<html>...</html>';
const iframe = document.createElement('iframe');
const blob = new Blob([html], {type: 'text/html'});
iframe.src = window.URL.createObjectURL(blob);
document.body.appendChild(iframe);

— damoeb
সূত্র

0

এটা কর

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

var frame_win = getIframeWindow(el);

console.log(frame_win);
...

getIframeWindow এখানে সংজ্ঞায়িত করা হয়

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

— ডোমিনিক ফোর্টিন
সূত্র