jQuery बल iframe के लिए src विशेषता सेट करता है


83

मेरे पास एक मुख्य पृष्ठ (वास्तव में एक JSP) है, जिसके अंदर एक iframe है;

<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>

अब मुख्य पृष्ठ पर कई लिंक हैं (जेएसपी के माध्यम से गतिशील रूप से प्रस्तुत किए गए) जो कुछ URL पर src सेट करने का प्रयास कर सकते हैं ...

अब मेरा सवाल है, jQuery का उपयोग करके (हो सकता है कि लाइव ()), क्या मैं इसे इस तरह से ओवरराइड कर सकता हूं कि abc_frame के लिए "src" विशेषता का हमेशा कुछ विशेष मूल्य होगा (जैसे "somefixedURL")

मैं लिंक पर क्लिक करते हुए कब्जा नहीं कर सकता, क्योंकि यह पूरी तरह से गतिशील रूप से कुछ जावा कोड के माध्यम से बनाया गया है और इसलिए मैं iframe src को ओवरराइड करने की कोशिश कर रहा हूं?

जवाबों:


166

Attr का प्रयोग करें

$('#abc_frame').attr('src', url)

इस तरह से आप प्रत्येक HTML टैग विशेषता प्राप्त और सेट कर सकते हैं। ध्यान दें कि वहाँ भी है .prop()। अंतर के बारे में .prop () बनाम .attr () देखें । लघु संस्करण: .attr()विशेषताओं के लिए उपयोग किया जाता है क्योंकि वे HTML स्रोत कोड में लिखे गए हैं और .prop()उन सभी के लिए हैं जो जावास्क्रिप्ट DOM तत्व से जुड़े हैं।


पृष्ठ लोड होने के बाद यह काम नहीं करेगा कारण, एक और लिंक src को एक नए मूल्य में बदल देगा ...
testndtv

यदि आप फ़ाइल के अंत में कोड को साझा करते हैं तो आप कोड को अन्य स्क्रिप्ट के बाद निष्पादित करेंगे। यदि आप किसी विशिष्ट लिंक द्वारा उपयोगकर्ता द्वारा बनाई गई समस्या पर क्लिक करते हैं तो आप लिंक पर एक दूसरी ऑनक्लिक घटना जोड़ सकते हैं। अन्यथा आपको setTimout / setInterval का उपयोग करना होगा और बार-बार src (बदसूरत!) के मूल्य की जांच करनी होगी।
PiNNumber

20

यदि आप jQuery 1.6 और ऊपर का उपयोग कर रहे हैं, तो आप के बजाय .prop () का उपयोग करना चाहते हैं.attr():

$('#abc_frame').prop('src', url)

मतभेदों की व्याख्या के लिए यह प्रश्न देखें ।


4
दिलचस्प लिंक लेकिन कृपया ध्यान दें कि इस सवाल का जवाब क्योंकि jQuery अद्यतन किया गया है को वापस लाया गया attr() व्यवहार। कुल मिलाकर मैं .prop()यहाँ का उपयोग करने पर असहमत हूँ क्योंकि srcएक विशेषता यह है कि .prop()आपके द्वारा लिंक किए गए व्याख्याओं के लिए एपीआई दस्तावेज के रूप में संपत्ति नहीं है ।
PiNNumber

9

लिंक बनाते समय iframes नाम की संपत्ति के लिए लक्ष्य निर्धारित करें और आपको संभवतः jquery से निपटना होगा।

<a href="inventory.aspx" target="contentframe"  title="Title Inventory">
<iframe id="iframe1" name="contentframe"  ></iframe>

जब संभव हो तो ब्राउज़र की मूल विधि का उपयोग करने के लिए अच्छा विचार है, लेकिन मुझे लगता है कि उपयोगकर्ता के पास डायनामिक लिंक हैं इसलिए क्लिक अटर पर कब्जा करने की आवश्यकता है।
efwjames

कैसे गतिशील? पृष्ठ बनाते समय आपको जो कुछ भी चाहिए उसे href सेट करें। या यहां तक ​​कि डोम लोड पर भी href विशेषता सेट करें यदि आपको करना है। मुद्दा यह है कि iframe की src संपत्ति को संभालना नहीं है और यह संभव बनाता है।
ब्रायन रिज़ो


5

सेटिंग src विशेषता मेरे लिए काम नहीं किया। Iframe ने url प्रदर्शित नहीं किया।

मेरे लिए क्या काम था:

window.open(url, "nameof_iframe");

आशा है कि यह किसी की मदद करता है।


.attr () के साथ सेटिंग करने से भी मेरे काम नहीं आया। हालांकि यह काम करता है
एंडी एन

3
<script type="text/javascript">
  document.write(
    "<iframe id='myframe' src='http://www.example.com/" + 
    window.location.search + "' height='100' width='100%' >"
  ) 
</script>  

यह कोड iframe वाले पेज से url-पैरामीटर्स ((= 1 & b = 2) लेता है और उन्हें iframe के बेस यूआरएल में अटैच कर देता है। यह मेरे उद्देश्यों के लिए काम करता है।


document.writeका उपयोग करने के बराबर है eval()- यह स्क्रिप्ट इंजेक्शन के अधीन है! केवल अत्यधिक सावधानी के साथ उपयोग करें!
amphetamachine

1

आप FIX iframe के src को सेट नहीं कर सकते या इसके स्थान को बदलने के लिए जावास्क्रिप्ट / फॉर्म सबमिट को रोक सकते हैं। हालाँकि आप स्क्रिप्ट को पेज के ऑनलोड और प्रत्येक डायनेमिक लिंक की क्रिया को बदल सकते हैं।


1
$(".excel").click(function () {
    var t = $(this).closest(".tblGrid").attr("id");
    window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t;
});

यह वह चीज है जिसका मैं उपयोग करता हूं, इसके लिए किसी भी प्रकार की आवश्यकता नहीं है। इस विशिष्ट परिदृश्य में प्रत्येक तालिका के लिए मेरे पास एक एक्सेल एक्सपोर्ट आइकन है, जो उस तालिका से जुड़े iframe को क्वेरी स्ट्रिंग में एक वैरिएबल के साथ उसी पृष्ठ को लोड करने के लिए मजबूर करता है, जो पेज की तलाश में है, और यदि प्रतिक्रिया मिली तो स्ट्रीम के साथ स्ट्रीम लिखता है excel mimetype और उस तालिका का डेटा शामिल करता है।

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