জাভাস্ক্রিপ্টের সাথে iframe src পরিবর্তন করা হচ্ছে

Question 1

<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>

স্নিপেট প্রসারিত করুন

Question 2

এই ক্ষেত্রে এটি সম্ভবত কারণ আপনি এখানে ভুল বন্ধনী ব্যবহার করছেন:

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

হতে হবে

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

Question 3

হতে পারে এটি সহায়ক হতে পারে ... এটি সরল এইচটিএমএল - জাভাস্ক্রিপ্ট নেই:

<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>

স্নিপেট প্রসারিত করুন

উপায় দ্বারা কিছু সাইটগুলি আপনাকে সেগুলিকে আইফ্রেমে খুলতে দেয় না (সুরক্ষার কারণে - ক্লিক জ্যাকিং)

Question 4

এটি করার jQuery উপায় এখানে:

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

Question 5

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

Question 6

এটিও কার্যকর srcহবে , যদিও ইচ্ছাটি অক্ষত থাকবে:

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

Question 7

এই আমার আপডেট কোড। এটি দুর্দান্ত কাজ করে এবং এটি আপনাকে সহায়তা করতে পারে।

<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>

Question 8

পরিবর্তন onselectকরার জন্য onchangeইনপুট এবং ব্যবহারে

calendar.src = loc

কোড স্নিপেট দেখান

<!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) {
    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" onchange="go('https://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" onchange="go('https://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" onchange="go('https://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>

স্নিপেট প্রসারিত করুন

Question 9

আপনি জাভাস্ক্রিপ্টে iframe করে এটি সমাধান করতে পারেন

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");

স্নিপেট প্রসারিত করুন