2010-09-16 8 views
61

के साथ iframe src बदल रहा है जब कोई रेडियो बटन पर क्लिक करता है तो मैं iframe src को बदलने की कोशिश कर रहा हूं। किसी कारण से मेरा कोड सही तरीके से काम नहीं कर रहा है और मुझे यह पता लगाने में परेशानी हो रही है कि क्यों।जावास्क्रिप्ट

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
    <title>Untitled 1</title> 
 

 
    <script> 
 
    function go(loc) { 
 
    document.getElementById('calendar').src = loc; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe> 
 

 
    <form method="post"> 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week 
 
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month 
 
    </form> 
 

 
</body> 
 

 
</html>

+0

@Pekka यही कारण है कि यह एक टिप्पणी है द्वारा इसे हल कर सकते हैं। – mbq

+0

@mbq नहीं, मेरा मतलब है कि यह इस परिदृश्य में एक बहुत बुरा विचार है। लगता है कि ओपी बाहरी सेवा से कोड एम्बेड कर रहा है। आप क्रॉस डोमेन सुरक्षा के कारण पहले स्थान पर AJAX का उपयोग नहीं कर सकते हैं, और यहां तक ​​कि यदि आप कर सकते हैं, तो HTML रखना और उसे DIV में डालना काम नहीं करेगा, क्योंकि इसमें छवियों और स्टाइल शीट के सापेक्ष संदर्भ हो सकते हैं और इस तरह के। IFrames वास्तव में यहां जाने की बात है मुझे लगता है कि –

+0

@ पेक्का मैं सहमत हूं; मुझे उस रिमोट सर्विस हिस्से को याद आया। मैंने अपनी टिप्पणी हटा दी है कि लोगों को भ्रमित न करें। – mbq

उत्तर

91

इस मामले में, यह शायद इसलिए है क्योंकि आप यहाँ गलत कोष्ठक का उपयोग कर रहे हैं:: यहाँ मैं क्या है

document.getElementById['calendar'].src = loc; 

होना चाहिए

document.getElementById('calendar').src = loc; 
+1

मैंने इसे बदल दिया और यह अभी भी काम नहीं कर सका। – shinjuo

+11

@shinjuo 'onselect' यहां उपयोग करने के लिए सही विशेषता नहीं है।आप 'ऑनक्लिक' का उपयोग करना चाह सकते हैं - नोटिस हालांकि अगर उपयोगकर्ता अपने कीबोर्ड –

+0

का उपयोग करता है तो वह आग नहीं लगेगा। धन्यवाद। चयन पर मैंने जो कारण चुना है वह इसलिए है क्योंकि मैंने सोचा था कि यदि कोई माउस के बजाए स्थानांतरित और हिट स्पेस पर क्लिक करता है तो यह अभी भी – shinjuo

6

onselectonclick होना चाहिए। यह कीबोर्ड उपयोगकर्ताओं के लिए काम करेगा।

मैं "डे", "माह" और "वर्ष" के पाठ पर <label> टैग जोड़ने की भी सिफारिश करता हूं ताकि उन्हें क्लिक करना आसान हो सके। उदाहरण कोड:

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/><label for="day">Day</label> 

मैं भी विशेषता onclick और मूल्य के बीच रिक्त स्थान को हटाने की सिफारिश करेंगे हालांकि यह ब्राउज़र द्वारा पार्स किया जा सकता:

<input name="calendarSelection" type="radio" onclick = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day 

होना चाहिए:

<input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day 
+1

सच नहीं है। http://stackoverflow.com/questions/828262 – nalply

+2

@nalply - मैं आपके डाउनवोट को समझ नहीं पा रहा हूं। मूल समस्या रिक्त स्थान नहीं है, जो मैंने कहा * * बदला जाना चाहिए। समस्या यह है कि अचयनित होना चाहिए। यह भी ध्यान रखें कि पेक्का द्वारा अन्य उत्तर समस्या को हल नहीं करता है। मैं इसे स्पष्ट करने के लिए अपने उत्तर दोबारा आदेश दूंगा। –

+0

मैंने डाउनवोट हटा दिया क्योंकि आपका नया संपादन पहले से स्पष्ट है। – nalply

46

शायद यह सहायक हो सकता है ... यह सादा एचटीएमएल है - कोई जावास्क्रिप्ट नहीं:

<p>Click on link bellow to change iframe content:</p> 
 
<a href="http://www.bing.com" target="search_iframe">Bing</a> - 
 
<a href="http://en.wikipedia.org" target="search_iframe">Wikipedia</a> - 
 
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe) 
 

 
<iframe src="http://en.wikipedia.org" width="100%" height="100%" name="search_iframe"></iframe>

तरह से कुछ साइटों (सुरक्षा कारणों से - क्लिकजैकिंग) iframe में उन्हें खोलने के लिए अनुमति नहीं देते द्वारा

14

यहाँ jQuery जिस तरह से यह करना है:

$('#calendar').attr('src', loc); 
5

यह चाहिए यह भी काम करता है, हालांकि src बरकरार रहेगा:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com"; 
+3

यह तब काम नहीं करेगा जब iframe का पृष्ठ किसी भिन्न डोमेन पर है। –

-1

आप जावास्क्रिप्ट

में आइफ्रेम बनाने
document.write(" <iframe id='frame' name='frame' src='" + srcstring + "' width='600' height='315' allowfullscreen></iframe>");