URL के बजाय IFRAME स्रोत के रूप में Html कोड

123

IFRAME के लिए यह मानक कोड, क्या src URL को Just html कोड से बदलने का कोई तरीका है? इसलिए मेरी समस्या सरल है, मेरे पास एक पृष्ठ है जिसमें यह एक HTML बॉडी को लोड करता है MYSQL से मैं उस कोड को एक फ्रेम में प्रस्तुत करना चाहता हूं ताकि यह शेष पेज के स्वतंत्र और उस विशिष्ट बॉर्डरिंग की सीमा में इसे प्रस्तुत करे।

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

html iframe frame

— मैक्स
स्रोत

जवाबों:

150

आप इसे एक डेटा URL के साथ कर सकते हैं। इसमें संपूर्ण दस्तावेज़ HTML का एक स्ट्रिंग में शामिल है। उदाहरण के लिए, निम्न HTML:

<html><body>foo</body></html>

इसे इनकोड किया जा सकता है:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

और फिर srciframe की विशेषता के रूप में सेट करें । उदाहरण है ।

संपादित करें: दूसरा विकल्प जावास्क्रिप्ट के साथ ऐसा करना है। यह लगभग निश्चित रूप से तकनीक है जिसे मैं चुनूंगा। आप इस बात की गारंटी नहीं दे सकते कि ब्राउज़र कब तक डेटा URL स्वीकार करेगा। जावास्क्रिप्ट तकनीक कुछ इस तरह दिखाई देगी:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

उदाहरण

संपादित करें 2 (दिसंबर 2017) : सौरभ चंद्र पटेल के उत्तर की तरह, Html5 srcdoc विशेषता का उपयोग करें , जो अब स्वीकृत उत्तर होना चाहिए! यदि आप कुशलतापूर्वक IE / एज का पता लगा सकते हैं , तो एक टिप केवल उनके लिए srcdoc-polyfill पुस्तकालय का उपयोग करना है और सभी गैर-IE / Edge ब्राउज़रों में "शुद्ध" srcdoc विशेषता है ( सुनिश्चित करने के लिए caniuse.com की जाँच करें)।

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

— lonesomeday
स्रोत

इंटरनेट एक्सप्लोरर समर्थन? डेटा URI IE8 में html फाइलों का प्रतिनिधित्व नहीं कर सकता है

— franzlorenzon

क्या यहां क्रॉस मूल हेडर प्रदान करने का एक तरीका है? क्रोम इसकी शिकायत करता रहता है Blocked a frame with origin "http://localhost" from accessing a cross-origin frame।

— jozxyqk

@AndrewSwan मैं एकल उद्धरणों के साथ समस्या को काफी नहीं समझता। क्या आप मुझे एक उदाहरण दे सकते हैं?

— सेप्टाग्राम

मेरे जैसे किसी के लिए जो देख रहा था कि HTML को php के साथ इस तरह से कैसे एन्कोड किया जा सकता है, आप चाहते हैं rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba

ध्यान दें कि यदि आप innerHTMLब्राउज़र का उपयोग करते हैं तो वंशज स्क्रिप्ट टैग निष्पादित नहीं करेंगे। अधिक जानकारी के लिए Element.innerHTML MDN पृष्ठ का सुरक्षा विचार अनुभाग देखें ।

— लियोनिद वसीलेव

का उपयोग html5की नई विशेषता srcdoc(srcdoc-polyfill) डॉक्स

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

ब्राउज़र समर्थन - निम्नलिखित ब्राउज़रों में परीक्षण किया गया:

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

— सौरभ चंद्र पटेल
स्रोत

धन्यवाद ! मुझे आधुनिक वेबकिट वेबव्यू के लिए एक समाधान की आवश्यकता थी, और यह अब तक का सबसे सरल तरीका था!

— एंटोनी बोलिव

यह IE में समर्थित नहीं है

— दोस्त

CANIUse.com का कहना है कि समर्थन बहुत खराब है: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri नहीं, यह कहता है कि मूल समर्थन गरीब है, पॉलिफिल का नहीं ।

— वॉलफ

लेकिन जैसे ही आप उद्धरण चिह्नों का उपयोग शुरू करते हैं, यह टूट जाता है

— Agil

W3Schools के अनुसार, HTML 5 आपको एक नए "srcdoc" विशेषता का उपयोग करके ऐसा करने देता है , लेकिन ब्राउज़र समर्थन बहुत सीमित लगता है।

— एंड्रयू स्वान
स्रोत

Srcdoc के लिए एक Polyfill भी है ।

— उवे कीम

@ युवीकेम पॉलीफिल सुझाव देने के लिए धन्यवाद। यह हल्का है और बढ़िया काम करता है।

— मफिन मैन

Caniuse.com के अनुसार केवल बदनाम Microsoft के IE और एज ब्राउज़र (ओपेरा मिनी के अलावा) srcdoc विशेषता का समर्थन नहीं करते हैं , इसलिए यह "बहुत सीमित" नहीं है। Microsoft उपयोगकर्ताओं के लिए बस srcdoc-polyfill का उपयोग करें ।

— हेक्टर