HTML5 के साथ iFrames का विकल्प

196

मैं जानना चाहूंगा कि क्या HTML5 के साथ iFrames का कोई विकल्प है। मेरा मतलब है कि, एक iFrame का उपयोग किए बिना एक वेबपेज के अंदर क्रॉस-डोमेन HTML इंजेक्षन करने में सक्षम हो।

html  iframe 
— stemlaur
स्रोत

जवाबों:

96

मूल रूप से HTML को वेब पेज में एम्बेड करने के 4 तरीके हैं:

  • <iframe>एक iframe की सामग्री आपके पृष्ठ की तुलना में पूरी तरह से अलग संदर्भ में रहती है। जबकि यह ज्यादातर एक महान विशेषता है और यह ब्राउज़र संस्करणों के बीच सबसे अधिक संगत है, यह अतिरिक्त चुनौतियां पैदा करता है (फ्रेम के आकार को अपनी सामग्री से लपेटना मुश्किल है, स्क्रिप्ट के अंदर / बाहर, शैली के लिए लगभग असंभव है)।
  • AJAX । जैसा कि यहां दिखाए गए समाधान साबित होते हैं, आप XMLHttpRequestऑब्जेक्ट को डेटा प्राप्त करने के लिए उपयोग कर सकते हैं और इसे अपने पेज पर इंजेक्ट कर सकते हैं। यह आदर्श नहीं है क्योंकि यह स्क्रिप्टिंग तकनीकों पर निर्भर करता है, इस प्रकार निष्पादन कमियों और अन्य कमियों के बीच अधिक जटिल है ।
  • भाड़े । इस सवाल में कुछ उल्लेख किया गया है और बहुत विश्वसनीय नहीं है।

  • HTML5 वेब घटक । HTML आयात, वेब घटक का हिस्सा, HTML दस्तावेज़ों को अन्य HTML दस्तावेज़ों में बंडल करने की अनुमति देता है। यही कारण है कि शामिल है HTML, CSS, JavaScriptया कुछ और एक .htmlफ़ाइल हो सकते हैं। यह कई दिलचस्प उपयोग के मामलों के साथ एक शानदार समाधान बनाता है: एक ऐप को बंडल घटकों में विभाजित करें जिन्हें आप बिल्डिंग ब्लॉक्स के रूप में वितरित कर सकते हैं, अतिरेक, कोड संगठन आदि से बचने के लिए बेहतर प्रबंधन निर्भरताएं। यहां एक तुच्छ उदाहरण है:

    <!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

मूल संगतता अभी भी एक मुद्दा है, लेकिन आप इसे आज के सदाबहार ब्राउज़रों में काम करने के लिए एक पॉलीफ़िल का उपयोग कर सकते हैं ।

आप यहां और यहां और अधिक जान सकते हैं ।

— Oriol
स्रोत
3
HTML5 वेब घटक दिलचस्प है।
— कृष्ण श्रीहरि
1
मुझे पता है कि यह पोस्ट थोड़ी पुरानी है, लेकिन अभी टिप्पणी करना चाहता हूं: AJAX के संदर्भ में, "यह विचार नहीं है क्योंकि यह स्क्रिप्टिंग तकनीकों पर निर्भर करता है" ... तो, स्क्रिप्टिंग का उपयोग करने में क्या गलत है? AJAX इन विकल्पों का निर्विरोध फ्रंट-रनर है और यह जल्दी से मानक बन रहा है।
— nmg49
11
दुर्भाग्य से HTML आयात अब एक अप्रचलित विशेषता है। developer.mozilla.org/en-US/docs/Web/Web_Compords/…
— Gman
इसे हासिल करने का कोई नया तरीका?
— वाल्टर
IFrames के साथ एक और महत्वपूर्ण दोष यह है कि वहाँ कई वेबसाइटें हैं जिन्होंने 'एक्स-फ्रेम-ऑप्शंस' को 'एओरिजिन' पर सेट किया है और फिर कनेक्शन को मना कर दिया है। इस स्थिति में, आपका iFrame खाली रहता है। इसे ठीक करने का कोई तरीका नहीं है।
— इगोर पी।
61

आप ऑब्जेक्ट का उपयोग कर सकते हैं और एम्बेड कर सकते हैं, जैसे:

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

जो नया नहीं है, लेकिन फिर भी काम करता है। मुझे यकीन नहीं है कि यह एक ही कार्यक्षमता है, हालांकि।

— नैट
स्रोत
धन्यवाद ढेर, मुझे बॉक्स जैसी फेसबुक्स के लिए sdk लोड करने से बचाया।
— टेचाजेसिट
51

नहीं, कोई समकक्ष नहीं है। <iframe>तत्व अभी भी एचटीएमएल 5 में मान्य है। आपको अलग-अलग API हो सकते हैं, इसके लिए आपको किस सटीक सहभागिता पर निर्भर करता है। उदाहरण के लिए वहाँ postMessageविधि है जो आपको क्रॉस डोमेन जावास्क्रिप्ट इंटरैक्शन प्राप्त करने की अनुमति देती है। लेकिन अगर आप क्रॉस डोमेन HTML सामग्री (सीएसएस के साथ स्टाइल और जावास्क्रिप्ट के साथ इंटरेक्टेड) ​​प्रदर्शित करना चाहते हैं, तो यह iframeएक अच्छा तरीका है।

— डारिन दिमित्रोव
स्रोत
3
मुझे Google से सामग्री लोड करने की आवश्यकता है। लेकिन अगर यह विकल्प नहीं है, तो गूगल कैंटीन नहीं हो सकता।
— माइक
17
@ माइक, विकल्प एपीआई का उपयोग उस सेवा के लिए करना होगा जिसे आप उपयोग करना चाहते हैं। Google अपनी अधिकांश सेवाओं के लिए RESTful API प्रदान करता है।
— डारिन दिमित्रोव
45

object HTML5 में एक आसान विकल्प है:

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>
स्निपेट का विस्तार करें

आप भी आजमा सकते हैं embed:

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />
स्निपेट का विस्तार करें

— अबरार जहीन
स्रोत
4
दोनों सुरक्षा मुद्दों जैसे iframes के साथ मेरे पास मौजूद मुद्दों को दरकिनार नहीं करते
— SeanMC
3
ध्यान रखें कि अधिकांश आधुनिक ब्राउज़रों ने ब्राउज़र प्लग-इन के लिए समर्थन को हटा दिया है और हटा दिया है, इसलिए <एम्बेड> पर निर्भर होना आमतौर पर बुद्धिमान नहीं है यदि आप चाहते हैं कि आपकी साइट औसत उपयोगकर्ता के ब्राउज़र पर संचालित हो।
— नीरज
20

यदि आप ऐसा करना चाहते हैं और उस सर्वर को नियंत्रित करना चाहते हैं जिससे आधार पृष्ठ या सामग्री परोसी जा रही है, तो आप क्लाइंट को अनुमति देने के लिए क्रॉस ओरिजिनल रिसोर्स शेयरिंग ( http://www.w3.org/TR/access-control/ ) का उपयोग कर सकते हैं । पक्ष जावास्क्रिप्ट डेटा को एक <div>माध्यम से लोड करने के लिए XMLHttpRequest():

// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();

अब इस पूरे ऑपरेशन के लिंचपिन के लिए, आपको अपने सर्वर के लिए कोड लिखना होगा जो क्लाइंट को Access-Control-Allow-Originहेडर देगा, यह निर्दिष्ट करते हुए कि आप किस डोमेन से क्लाइंट-साइड कोड को एक्सेस करना चाहते हैं XMLHttpRequest()। निम्नलिखित PHP कोड का एक उदाहरण है जिसे आप अपने पेज के शीर्ष पर शामिल कर सकते हैं ताकि इन हेडर को ग्राहकों को भेजा जा सके:

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>
— L0j1k
स्रोत
14

यह भी काम करने लगता है, हालांकि W3C निर्दिष्ट करता है कि यह "बाहरी (आमतौर पर गैर-एचटीएमएल) अनुप्रयोग और इंटरैक्टिव" के लिए नहीं है

<embed src="http://www.somesite.com" width=200 height=200 />

अधिक जानकारी: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

— थॉमस सिमोन्स
स्रोत
8

क्रॉस-डोमेन दृश्य सामग्री डाउनलोड करने के लिए एक आइफ्रेम अभी भी सबसे अच्छा तरीका है। AJAX के साथ आप निश्चित रूप से HTML को एक वेब पेज से डाउनलोड कर सकते हैं और इसे div में चिपका सकते हैं (जैसा कि दूसरों ने उल्लेख किया है) हालांकि बड़ी समस्या सुरक्षा है। Iframes के साथ आप क्रॉस डोमेन कंटेंट को लोड करने में सक्षम होंगे, लेकिन तब तक इसमें हेरफेर नहीं कर पाएंगे, क्योंकि कंटेंट वास्तव में आपका नहीं है। AJAX के साथ आप निश्चित रूप से किसी भी सामग्री को डाउनलोड करने में सक्षम होने के लिए हेरफेर कर सकते हैं, लेकिन दूसरे डोमेन के सर्वर को इस तरह से सेटअप करने की आवश्यकता है जो आपको इसे डाउनलोड करने की अनुमति देगा। बहुत बार आपके पास दूसरे डोमेन के कॉन्फ़िगरेशन तक पहुंच नहीं होगी और यदि आप करते हैं, तब तक जब तक आप उस तरह के कॉन्फ़िगरेशन को पूरे समय तक नहीं करते, तब तक यह सिरदर्द हो सकता है। जिस स्थिति में iframe MUCH आसान विकल्प हो सकता है।

जैसा कि दूसरों ने उल्लेख किया है कि आप एम्बेड टैग और ऑब्जेक्ट टैग का भी उपयोग कर सकते हैं, लेकिन यह जरूरी नहीं है कि आइफ्रेम की तुलना में अधिक उन्नत या नया हो।

एचटीएमएल 5 क्रॉस डोमेन से जानकारी प्राप्त करने के लिए वेब एपीआई को अपनाने की दिशा में अधिक चला गया है। आमतौर पर वेब एपीआई केवल डेटा लौटाते हैं, हालांकि HTML नहीं।

— एडम
स्रोत
1
यह वास्तव में एक उत्तर नहीं है, लेकिन निश्चित रूप सेnice-to-know
— स्टेफ गीसेल्स
4

आप किसी पृष्ठ को div (या वास्तव में आपके पृष्ठ के किसी भी अन्य तत्व) में लोड करने के लिए XMLHttpRequest का उपयोग कर सकते हैं। एक अनुकरणीय कार्य होगा:

function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}

यदि आपकी स्थिति सक्षम है, तो आप ऐसा करने के लिए PHP का उपयोग भी कर सकते हैं, लेकिन जब से आप एचटीएमएल 5 विधि के लिए पूछ रहे हैं, तो आपको इसकी आवश्यकता होनी चाहिए।

— CupOfTea696
स्रोत
4
XMLHttpRequest का उपयोग करते हुए अन्य डोमेन से सामग्री लोड हो रही है जो अधिकांश ब्राउज़रों द्वारा अवरुद्ध है।
— एरिक टेरेनियस
4
Op क्रॉस-डोमेन के लिए पूछ रहा है, यह उत्तर मान्य नहीं है।
— तेमन शिपाही
4

मैंने इस समस्या नोड-iframe-प्रतिस्थापन को हल करने के लिए एक नोड मॉड्यूल बनाया । आप अपनी सामग्री को इंजेक्ट करने के लिए मूल साइट और CSS चयनकर्ता का स्रोत URL प्रदान करते हैं और यह दोनों को एक साथ जोड़ता है।

मूल साइट में परिवर्तन हर 5 मिनट में किया जाता है।

var iframeReplacement = require('node-iframe-replacement');

// add iframe replacement to express as middleware (adds res.merge method) 
app.use(iframeReplacement);

// create a regular express route 
app.get('/', function(req, res){

    // respond to this request with our fake-news content embedded within the BBC News home page 
    res.merge('fake-news', {
        // external url to fetch 
       sourceUrl: 'http://www.bbc.co.uk/news',
       // css selector to inject our content into 
       sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
       // pass a function here to intercept the source html prior to merging 
       transform: null
    });
});

स्रोत में बीबीसी न्यूज के होम पेज में सामग्री को इंजेक्ट करने का एक कार्यशील उदाहरण है ।

— जॉन डोहर्टी
स्रोत
0

आपको JSON-P पर एक नज़र डालनी चाहिए - जब मेरे पास यह समस्या थी तो मेरे लिए एक सही समाधान था:

https://en.wikipedia.org/wiki/JSONP

आप मूल रूप से एक जावास्क्रिप्ट फ़ाइल को परिभाषित करते हैं जो आपके सभी डेटा और एक अन्य जावास्क्रिप्ट फ़ाइल को लोड करती है जो इसे संसाधित और प्रदर्शित करती है। यह इफराम के बदसूरत स्क्रॉलबार से छुटकारा दिलाता है।

— मथियास बदर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.