2012-04-01 18 views
29

iframes का उपयोग कर के बिना, जैसे एक बाहरी साइट के साथअजाक्स/jQuery - पृष्ठ लोड पर एक div में वेबपृष्ठ सामग्री लोड करें?

<div id="siteloader"></div> 

की सामग्री को लोड करने के लिए यह संभव है somesitehere.com

पृष्ठ लोड होने पर? - मुझे पता है कि फ़ाइल से सामग्री कैसे लोड करें, लेकिन यह सुनिश्चित नहीं था कि पूरी साइट कैसे लोड करें?

बहुत धन्यवाद,

उत्तर

48

यह एक iframe विशेष रूप से बिना ऐसा करना संभव है। शीर्षक में वर्णित होने के बाद से jQuery का उपयोग किया जाता है।

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Load remote content into object element</title> 
    </head> 
    <body> 
    <div id="siteloader"></div>​ 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script> 
     $("#siteloader").html('<object data="http://tired.com/">'); 
    </script> 
    </body> 
</html> 
+5

नोट करें कि यह दूरस्थ नहीं होगा यदि दूरस्थ पृष्ठ का [एक्स-फ़्रेम-विकल्प शीर्षलेख] (https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options) इसे अस्वीकार करता है। –

2

आप एक अन्य साइट (डोमेन) से सामग्री AJAX का उपयोग कर इंजेक्षन नहीं कर सकते। इस प्रकार की चीजों के लिए iFrame उपयुक्त है कारण यह है कि आप किसी अन्य डोमेन से स्रोत निर्दिष्ट कर सकते हैं।

35

jQuery's .load() समारोह में एक नज़र डालें:

<script> 
    $(function(){ 
     $('#siteloader').load('http://www.somesitehere.com'); 
    }); 
</script> 

हालांकि, यह केवल जे एस फ़ाइल की एक ही डोमेन पर काम करता है।

+5

यह jQuery .load() विधि jQuery .Get() अन्य प्रतिक्रियाओं में प्रस्तावित की तुलना में बेहतर है, क्योंकि यह आप (उदाहरण के लिए, बस एक की सामग्री के बाहरी url डोम से एक विशिष्ट आइटम लोड करने की अनुमति div और पूरा पृष्ठ नहीं)। इस तरह आप दो "बॉडी" जैसे डुप्लिकेट मार्कअप से बचेंगे और इसलिए: $ ('# परिणाम') लोड ('AJAX/test.html #container'); – tomasofen

8

jQuery के साथ, यह संभव है, हालांकि AJAX का उपयोग नहीं कर रहा है।

function LoadPage(){ 
    $.get('http://a_site.com/a_page.html', function(data) { 
    $('#siteloader').html(data); 
    }); 
} 

और उसके बाद शरीर टैग में onload="LoadPage()" रखें।

यदि आप इस मार्ग का अनुसरण करें, एक PHP संस्करण बेहतर हो सकता है हालांकि:

echo htmlspecialchars(file_get_contents("some URL")); 
+24

आपको नहीं लगता कि '$ .get' अजाक्स है? – xyz

+0

नहीं, यह AJAX में संभव नहीं है, लेकिन यह अकेले jQuery में संभव है। पेज को डंप करने के लिए पृष्ठ को लोड किए जाने के बाद एक $ .get() को कॉल किया जा सकता है, निर्दिष्ट div – Njdart

+1

आपका उदाहरण jQuery में अजाक्स का उपयोग कर रहा है। मुझे लगता है कि आप अपने उदाहरण से कुछ अलग व्याख्या करने की कोशिश कर रहे हैं। – xyz

संबंधित मुद्दे