কোনও পৃষ্ঠায় src বৈশিষ্ট্যের পরিবর্তে একটি iframe এর সামগ্রী নির্দিষ্ট করা

90

আমি বর্তমানে এমন একটি ফর্ম নিয়ে কাজ করছি যা ছবি আপলোড করার জন্য কিছু ফাইল ইনপুট অন্তর্ভুক্ত করে। onchange()সেই সমস্ত ইনপুটগুলির জন্য একটি ইভেন্ট রয়েছে যা ছবিগুলিকে একটিতে জমা দেয় iframe, তারপরে পরিবর্তনশীলভাবে আপলোড করা ছবিগুলি ফর্মটিতে লোড করে, ক্ষেত্রগুলির জন্য তাদের সংশোধন করার জন্য ( নাম এবং ভূ-স্থানীয়করণের মতো )।

যেহেতু আমি বাসা বাঁধতে পারি না, file_inputএটিও একটিতে অন্তর্ভুক্ত iframe। শেষ পর্যন্ত আমি iframeঅন্য একটি অভ্যন্তর ব্যবহার iframe। সুতরাং আমার কাছে এরকম কিছু রয়েছে:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

এবং HTML মধ্যে লোড iframeমত (ব্যতীত কিছু html, headএবং bodyট্যাগ)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

প্রথমটি লোড হতে কয়েক সেকেন্ড সময় লাগে এই ব্যতীত এটি দুর্দান্ত কাজ করে iframe, তাই ফাইলের ইনপুটটি বাকী পৃষ্ঠাটির সাথে লোড হয় না। এটি দৃশ্যত আদর্শ নয় not যদি আমি iframeঅন্য পৃষ্ঠাটি লোড করার প্রয়োজন ছাড়াই বিষয়বস্তুটি নির্দিষ্ট করতে পারি তবে ( file_input_urlপ্রথমটি নির্দিষ্ট করে iframe) in

iframeএকই নথিতে সামগ্রী নির্দিষ্ট করার কোনও উপায় আছে , বা এটি কেবলমাত্র srcঅন্য কোনও পৃষ্ঠার লোডের প্রয়োজন বোধ করে বৈশিষ্ট্যের সাথে নির্দিষ্ট করা যেতে পারে ?

html iframe

— অরলক্স
সূত্র

এই iframe লোড করতে "কয়েক সেকেন্ড কয়েক" লাগবে না। আমি এটি মিলিসেকেন্ডের দশমের মতো আরও "কামড় দেওয়ার সময়" (যা মিলিসেকেন্ডেরও হওয়া উচিত) এর চেয়ে বেশি আশা করব। সমস্ত ল্যাগ কী ঘটছে তা আপনার তদন্ত করা উচিত - সম্ভবত আপনার সার্ভারে কিছু ভুল।

— অভি বেকার্ট

96

আপনি যদি .write()আইফ্রেমে নথিতে বিষয়বস্তু করতে পারেন । উদাহরণ:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— গুফা
সূত্র

4

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

— orlox

4

@ অরলক্স: অ্যাজাক্স ব্যবহার করে সার্ভার থেকে আপনার সামগ্রী পান এবং এটি ইনজেকশন করুন। আপনি যে ভাবে যেতে না চান, একটি লুকানো করতে divআপনার সামগ্রী সহ উপাদান এবং এর বিষয়বস্তু স্থান iframeমধ্যে <body>এবং </body>।

— স্ট্যাকুলার

11

আইফ্রেমেস বিধিনিষেধ সম্পর্কে আমি যত বেশি শিখি ততই আমি তাদের ঘৃণা করি

— জন ম্যাগনোলিয়া

4

এই পদ্ধতিটি ব্যবহার করে আমি কীভাবে একক উদ্ধৃতিগুলি রক্ষা করব? এর মধ্যে কয়েকটি এইচটিএমএল-গুরুত্বপূর্ণ (যেমন শ্রেণি = 'উদাহরণ'), কিছু সিএসএস-গুরুত্বপূর্ণ (যেমন হরফ-পরিবার: 'ভার্দানা';) এবং কিছু বিষয়বস্তু (যেমন জর্জ ও'ম্যালি)।

— ড্যান বেচার্ড 17

4

@ ড্যান: অ্যাডাস্ট্রোফ ডিলিমেটেড জাভাস্ক্রিপ্ট স্ট্রিংয়ে ব্যবহৃত কোনও মান এড়ানোর জন্য, আপনি প্রথমে ব্যাকস্ল্যাশ, তারপরে অ্যাস্টোস্ট্রোফস এড়িয়ে চলুন। উদাহরণস্বরূপ আউটপুট কোডে একটি স্ট্রিং ব্যবহার সি #: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');।

— গুফা

36

iframe এখন srcdoc সমর্থন করে যা ইনলাইন ফ্রেমে দেখানোর জন্য পৃষ্ঠার এইচটিএমএল বিষয়বস্তু নির্দিষ্ট করতে ব্যবহার করা যেতে পারে।

— আয়ুষ গুপ্ত
সূত্র

4

আইই এই অধিকারটি সমর্থন করে না তবে আপনি এটির সর্বশেষ স্থিতির জন্য ক্যানিজ ব্যবহার করতে পারেন।

— আয়ুষ গুপ্ত

এমডিএন

— বেনোইট ব্লাঞ্চন

22

আপনি এতে data:ইউআরএল ব্যবহার করতে পারেন src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

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

একটি ইফ্রেমে srcdoc = "…" এবং src = "ডেটা: পাঠ্য / এইচটিএমএল,…" এর মধ্যে পার্থক্য ।

এইচটিএমএলকে ডেটাতে রূপান্তর করুন: জাভাস্ক্রিপ্ট ব্যবহার করে পাঠ্য / এইচটিএমএল লিঙ্ক ।

— ব্যবহারকারী
সূত্র

4

আপনার এমনকি কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই: srcযেমন rawurlencodeপিএইচপি ব্যবহার করে পালিয়ে গেলে অ্যাট্রিবিউটটি নির্দিষ্ট করে নির্দিষ্ট করা যেতে পারে :<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— জ্যাক

মাইক্রোসফ্ট তাদের পক্ষে সমর্থন যোগ করার সাথে সাথে এটির জন্য সমর্থন যোগ করেছে srcdocএবং srcdocএটি করার আরও ভাল উপায়। ডেটা ইউআরএলগুলি কেবল চিত্র এবং সিএসএসের জন্য ব্যাপকভাবে সমর্থিত - যতদূর আমি জানি ইন্টারনেট এক্সপ্লোরারের কোনও সংস্করণ কোনও আইফ্রেমে তাদের সমর্থন করে না।

— অভি বেকার্ট

6

গুফা বর্ণিত যাটির সংমিশ্রণে আপনি << স্ক্রিপ্ট টাইপ = "টেক্সট / টেম্পলেট"> ... </ translation> এর ব্যাখ্যায় বর্ণিত প্রযুক্তিটি একটি বিশেষ scriptউপাদানটিতে এইচটিএমএল দস্তাবেজ সংরক্ষণ করতে ব্যবহার করতে পারেন (ব্যাখ্যাটির জন্য লিঙ্কটি দেখুন এটি কীভাবে কাজ করে)। স্ট্রিমে এইচটিএমএল ডকুমেন্ট সংরক্ষণ করার চেয়ে এটি অনেক সহজ।

— ximo
সূত্র

দ্বিতীয় ভাবাতে, এটি একটি সম্পূর্ণ এইচটিএমএল ডকুমেন্টের জন্য খুব ভাল কাজ করবে না। যেমন ট্যাগ্স <html>, <body>, <script>শুধুমাত্র ব্রাউজার গুলান হবে, নথির রেন্ডারিং ভঙ্গ।

— ximo

এটি কোনও সমস্যা বলে মনে হচ্ছে না, স্ক্রিপ্টগুলির ভিতরে থাকা HTML ট্যাগগুলি উপেক্ষা করা হবে।

— এইচবিপি

আপনি ঠিক বলেছেন :) আমি লেখার সময় আমি এখনও প্রযুক্তিটি ব্যবহার করে দেখিনি, এবং অবশ্যই এই ধারণাটি কোথাও থেকে বেছে নিয়েছি। পরে আমি জানতে পেরেছি যে কোনও <script>ট্যাগের মধ্যে থাকা কোনও কিছুই ব্রাউজার দ্বারা উপেক্ষা করা হবে .. আমাকে সংশোধন করার জন্য ধন্যবাদ!

— ximo