자바 스크립트로 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 
— 신주 오
소스
@Pekka 그것이 댓글 인 이유입니다.
— mbq
@mbq 아니요,이 시나리오에서는 정말 나쁜 생각입니다. OP는 외부 서비스의 코드를 포함하는 것 같습니다. 도메인 간 보안으로 인해 처음에는 AJAX를 사용하여 가져올 수 없으며 가능하더라도 HTML을 가지고 DIV에 넣는 것은 이미지 및 스타일 시트에 대한 상대 참조를 포함 할 수 있기 때문에 작동하지 않습니다. 이러한. IFrames는 정말로 여기에 갈 것입니다.
— Pekka
@Pekka 동의합니다. 나는 원격 서비스 부분을 놓쳤다. 사람들을 혼동하지 않도록 내 댓글을 삭제했습니다.
— mbq
모든 브라우저에서 위의 코드가 작동하지 않는 이유는 무엇입니까 ????
— harix

답변:

125

이 경우 여기에 잘못된 대괄호를 사용하고 있기 때문일 수 있습니다.

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

해야한다

document.getElementById('calendar').src = loc;
— 페카
소스
11
@shinjuo onselect는 여기에서 사용할 올바른 속성이 아닙니다. 당신은 사용할 수 있습니다 onclick- 통지를하는하지 않습니다 화재 즉, 사용자가 키보드를 사용하는 경우 비록
— 페카
그것이 그랬습니다. 감사. 내가 select를 선택한 이유는 누군가가 마우스 클릭 대신 탭을 치고 스페이스를 치면 여전히 변경 될 것이라고 생각했기 때문입니다.
— shinjuo
@shinjuo 네, 좋은 생각입니다. 나는 당신이 그것을 위해 약간의 변형을 사용해야한다고 생각 onchange합니다.
— Pekka
2
"onclick"은 키보드에서 작동합니다. "onselect"이벤트가 없습니다.
— Aaron D
@Aaron 비표준 onselect 이벤트가 있지만 텍스트를 선택하기위한 것입니다. onclick라디오 버튼을 켜고 끄는 데 작동 하면 모든 것이 해결 된 것입니다.
— Pekka
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 "이 인프레 임에서 허용되지 않는 이유 와이를 사용할 수 있도록하기위한 조언 (iframe이 아니어야하지만 유사)을 설명해 주 시겠습니까? 너무 감사합니다.
— Qibiron Who
1
@ hikaru89 이것은 늦은 응답입니다 ... 당신은 그것을 사용할 수 있도록 "만들 수"없습니다. 의도적으로 iframe에서 허용되지 않는 Google은 여러 가지 이유로 자체적으로 이것을 수행합니다.
— Mister SirCode
18

이를 수행하는 jQuery 방법은 다음과 같습니다.

$('#calendar').attr('src', loc);
— 짐 클 루즈
소스
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
— Aaron D
소스
2
@nalply-귀하의 반대표를 이해하지 못합니다. 근본적인 문제는 내가 변경 해야한다고 말한 공백이 아닙니다 . 문제는 onselect가 onclick이어야한다는 것입니다. 또한 Pekka의 다른 답변으로는 문제가 해결되지 않습니다. 더 명확하게 대답을 다시 정렬하겠습니다.
— Aaron D
새 수정 사항이 이전보다 명확하기 때문에 반대표를 삭제했습니다.
— nalply
6

이 방법 src은 그대로 유지 되지만 작동합니다 .

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— 아람 파로 니키 안
소스
3
iframe의 페이지가 다른 도메인에있을 때는 작동하지 않습니다.
— Frederic Leitenberger
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

코드 스 니펫 표시

— 카밀 키에 우 체프 스키
소스
-1

자바 스크립트로 iframe을 만들어 해결할 수 있습니다.

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
스 니펫 확장
— 다니엘 야 노프 스키
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.