जावास्क्रिप्ट के साथ iframe src बदलना

94

<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>
स्निपेट का विस्तार करें

javascript  iframe  src 
— shinjuo
स्रोत
@Pekka यही कारण है कि यह एक टिप्पणी है।
— mbq
@mbq नहीं, मेरा मतलब है कि इस परिदृश्य में यह बहुत बुरा विचार है। ऐसा लगता है कि ओपी बाहरी सेवा से कोड एम्बेड कर रहा है। क्रॉस डोमेन सुरक्षा के कारण आप पहली बार AJAX का उपयोग नहीं कर सकते हैं, और यदि आप कर सकते हैं, तो भी HTML होने और इसे DIV में डालने से काम नहीं चलेगा, क्योंकि इसमें छवियों और शैली पत्रक के सापेक्ष संदर्भ हो सकते हैं और इस तरह के। इफ्रेम्स वास्तव में यहाँ जाने की बात है, मुझे लगता है
— पक्के
@Pekka मैं सहमत हूँ; मुझे वह रिमोट सर्विस पार्ट याद आ गया। मैंने लोगों को भ्रमित न करने के लिए अपनी टिप्पणी हटा दी है।
— mbq
किसी भी ब्राउज़र में ऊपर क्यों काम नहीं करता है ????
— १

जवाबों:

125

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

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

होना चाहिए

document.getElementById('calendar').src = loc;
— पेका
स्रोत
11
@shinjuo onselectयहाँ उपयोग करने के लिए सही विशेषता नहीं है। आप उपयोग करना चाहते हैं onclick- नोटिस कर सकते हैं कि अगर उपयोगकर्ता अपने कीबोर्ड का उपयोग नहीं करेगा तो आग लग जाएगी
— Pekka
जो था वही हुआ। धन्यवाद। मेरे द्वारा चुने जाने का कारण यह है क्योंकि मैंने सोचा था कि अगर कोई माउस के बजाय अंतरिक्ष से
— टकराए और टकराए
@ शंशुओ हाँ, यह अच्छा विचार है। मुझे लगता है कि हालांकि आपको इसके लिए कुछ भिन्नता का उपयोग करना होगा onchange।
— पक्के
2
"ऑनक्लिक" कीबोर्ड के लिए काम करता है। कोई "onselect" ईवेंट नहीं है।
— आरोन डी।
@ एरॉन एक गैर-मानक ऑन्सेलेट घटना है, लेकिन यह पाठ के चयन के लिए है। यदि onclickरेडियो बटन को चालू / बंद करने के लिए काम करता है तो सब कुछ हल हो गया है, बढ़िया!
— पेका
61

शायद यह उपयोगी हो सकता है ... यह सादे HTML है - कोई जावास्क्रिप्ट नहीं:

<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 (सुरक्षा कारणों - क्लिकजैकिंग) में उन्हें खोलने की अनुमति नहीं देती हैं

— inemanja
स्रोत
2
कृपया समझा सकते हैं कि " google.com " को inframe में अनुमति क्यों नहीं दी गई है और इसे उपलब्ध कराने की कोई सलाह (iframe नहीं होना चाहिए, लेकिन similary)? इतनी सराहना करो।
— किबिरोन हू
1
@ hikaru89 यह एक देर से जवाब है ... आप इसे उपलब्ध "बस" नहीं कर सकते। इसका उद्देश्य पर iframes में अनुमति नहीं है, Google अपने स्वयं के आधार पर कई कारणों से ऐसा करता है।
— मिस्टर सिरकोड
8

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

मैं <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
— हारून डी
स्रोत
2
@ हंसते हुए - मैं आपके अपमान को नहीं समझता। मूल समस्या रिक्त स्थान नहीं है, जो मैंने कहा था कि बदलना चाहिए । समस्या यह है कि onselect को onclick होना चाहिए। यह भी ध्यान दें कि पाइका के अन्य उत्तर समस्या का समाधान नहीं करते हैं। मैं अपना उत्तर पुनः स्पष्ट करने के लिए आदेश दूंगा।
— आरोन डी
मैंने डाउनवोट हटा दिया क्योंकि आपका नया संपादन पहले की तुलना में स्पष्ट है।
— nalply
2

यहाँ मेरा अपडेटेड कोड है। यह ठीक काम करता है और यह आपकी मदद कर सकता है।

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript">
  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" 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')" />Week
    <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')" />Month
  </form>

</body>

</html>
— KBH
स्रोत
0

बदलने onselectके लिए onchangeइनपुट और उपयोग में

calendar.src = loc

कोड स्निपेट दिखाएं

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