Thay đổi iframe src bằng Javascript

94

Tôi đang cố gắng thay đổi một <iframe src=... >khi ai đó nhấp vào nút radio. Vì một số lý do mà mã của tôi không hoạt động chính xác và tôi đang gặp khó khăn trong việc tìm hiểu lý do. Đây là những gì tôi có:

<!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>
Mở rộng đoạn mã

javascript  iframe  src 
— shinjuo
nguồn
@Pekka Đó là lý do tại sao nó là một bình luận.
— mbq
@mbq không, ý tôi là đó là một ý tưởng thực sự tồi trong trường hợp này. OP dường như đang nhúng mã từ một dịch vụ bên ngoài. Bạn không thể tìm nạp điều đó bằng AJAX ngay từ đầu vì bảo mật tên miền chéo và ngay cả khi bạn có thể, việc có HTML và đưa nó vào DIV sẽ không hoạt động, vì nó có thể chứa các tham chiếu tương đối đến hình ảnh và biểu định kiểu và như là. IFrame thực sự là những điều để đi ở đây tôi nghĩ
— Pekka
@Pekka Tôi đồng ý; Tôi đã bỏ lỡ phần dịch vụ từ xa đó. Tôi đã xóa bình luận của mình để không gây nhầm lẫn cho mọi người.
— mbq
TẠI SAO KHÔNG LÀM VIỆC mã ở trên trong bất kỳ trình duyệt nào ????
— harix

Câu trả lời:

125

Trong trường hợp này, có thể do bạn đang sử dụng sai dấu ngoặc ở đây:

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

nên là

document.getElementById('calendar').src = loc;
— Pekka
nguồn
11
@shinjuo onselectkhông phải là thuộc tính chính xác để sử dụng ở đây. Bạn có thể muốn sử dụng onclick- thông báo rằng mặc dù rằng sẽ không cháy nếu người dùng sử dụng bàn phím của họ
— Pekka
Đó là những gì nó đã được. Cảm ơn. Lý do tôi chọn trên một số là vì tôi nghĩ rằng nếu ai đó theo thẻ qua và không gian hit thay vì click chuột mà nó vẫn sẽ thay đổi
— shinjuo
@shinjuo vâng, đó là ý kiến ​​hay. Tôi nghĩ rằng mặc dù vậy bạn phải sử dụng một số biến thể của onchangenó.
— Pekka
2
"onclick" hoạt động cho bàn phím. Không có sự kiện "bỏ chọn".
— Aaron D
@Aaron có một sự kiện onselect không chuẩn, nhưng nó để chọn văn bản. Nếu onclickhoạt động để bật / tắt nút radio thì mọi thứ đã được giải quyết, tuyệt vời!
— Pekka
61

Có lẽ điều này có thể hữu ích ... Đó là html thuần túy - không có javascript:

<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>
Mở rộng đoạn mã

Nhân tiện, một số trang web không cho phép bạn mở chúng trong iframe (lý do bảo mật - clickjacking)

— inemanja
nguồn
2
Vui lòng giải thích lý do tại sao " google.com " không được phép sử dụng trong cơ sở hạ tầng và bất kỳ lời khuyên nào để cung cấp nó (không phải là iframe, mà là tương tự)? Đánh giá cao rất nhiều.
— Qibiron Who
1
@ hikaru89 đây là một câu trả lời muộn ... Bạn không thể chỉ "làm cho" nó có sẵn. Nó không được phép cố ý trong iframe, google thực hiện điều này vì nhiều lý do theo cách riêng của họ.
— Mister SirCode
18

Đây là cách jQuery để làm điều đó:

$('#calendar').attr('src', loc);
— Jim Clouse
nguồn
8

Các onselectphảionclick . Điều này sẽ hoạt động đối với người dùng bàn phím.

Tôi cũng khuyên bạn nên thêm <label>các thẻ vào văn bản "Ngày", "Tháng" và "Năm" để làm cho chúng dễ nhấp vào hơn. Mã ví dụ:

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

Tôi cũng khuyên bạn nên xóa các khoảng trắng giữa thuộc tính onclickvà giá trị, mặc dù trình duyệt có thể phân tích cú pháp nó:

<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

Nên là:

<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
— Aaron D
nguồn
2
@nalply - Tôi không hiểu ý kiến ​​phản đối của bạn. Vấn đề gốc không phải là khoảng trắng, mà tôi đã nói nên được thay đổi. Vấn đề là chọn phải được nhấp chuột. Cũng lưu ý rằng câu trả lời khác của Pekka không giải quyết được vấn đề. Tôi sẽ sắp xếp lại câu trả lời của mình để làm cho nó rõ ràng hơn.
— Aaron D
Tôi đã xóa phiếu phản đối vì chỉnh sửa mới của bạn rõ ràng hơn trước.
— nalply
6

Điều này cũng sẽ hoạt động, mặc dù di srcchúc vẫn còn nguyên vẹn:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
nguồn
3
Điều này sẽ không hoạt động khi trang trong iframe nằm trên một miền khác.
— Frederic Leitenberger
2

Đây là mã cập nhật của tôi. Nó hoạt động tốt và nó có thể giúp bạn.

<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
nguồn
0

thay đổi onselectđể onchangeở đầu vào và sử dụng

calendar.src = loc

Hiển thị đoạn mã

— Kamil Kiełczewski
nguồn
-2

Bạn có thể giải quyết nó bằng cách tạo iframe trong javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Mở rộng đoạn mã
— daniel yanovsky
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.