반응형
자바 스크립트로 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>이 경우 여기에 잘못된 대괄호를 사용하고 있기 때문일 수 있습니다.
document.getElementById['calendar'].src = loc;
해야한다
document.getElementById('calendar').src = loc;
아마도 이것이 도움이 될 수 있습니다 ... 일반 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에서 열 수 없습니다 (보안상의 이유-클릭 재킹).
이를 수행하는 jQuery 방법은 다음과 같습니다.
$('#calendar').attr('src', loc);
은 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
이 방법 src은 그대로 유지 되지만 작동합니다 .
document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
다음은 업데이트 된 코드입니다. 잘 작동하며 도움이 될 수 있습니다.
<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>
변경 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>자바 스크립트로 iframe을 만들어 해결할 수 있습니다.
document.write(" <iframe id='frame' name='frame' src='" + srcstring + "' width='600' height='315' allowfullscreen></iframe>");참고 URL : https://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript
반응형
'your programing' 카테고리의 다른 글
| 폴더에 대한 Windows 탐색기에 상황에 맞는 메뉴 항목을 추가하는 방법 (0) | 2020.10.04 |
|---|---|
| redux-thunk와 redux-promise의 차이점은 무엇입니까? (0) | 2020.10.04 |
| LINQ를 사용하여 트리 검색 (0) | 2020.10.04 |
| Axios가 요청에서 자동으로 쿠키를 보내도록합니다. (0) | 2020.10.04 |
| 자바 : PreparedStatement를 사용하여 MySQL에 여러 행 삽입 (0) | 2020.10.04 |