JavaScript에서 Iframe 소스 변경

Muhammad Muzammil Hussain 2023년10월12일

JavaScript JavaScript Element

JavaScript에서 iframe 소스 변경
JQuery의 대체 방법

iframe은 페이지 URL 또는 경로의 도움으로 웹 페이지 내에 웹 사이트를 표시하는 데 사용되는 HTML 요소입니다. 현재 HTML 문서 내에 다른 문서를 포함할 수 있습니다.

iframe의 크기를 지정하기 위해 "height" 및 "width" 속성을 별도로 사용하거나 CSS에 대한 style 속성을 사용할 수 있습니다.

통사론:

<iframe src="dummy_iframe.htm" height="200" width="300" title="Dummy Iframe"></iframe>

JavaScript에서 `iframe` 소스 변경

iframe 소스 변경의 기본 아이디어는 iframe 디스플레이에서 웹 페이지를 전환하는 것입니다. JavaScript에서는 소스를 변경하거나 JavaScript 기본 메서드 getElementById()를 사용하여 재정의할 수 있습니다.

웹페이지의 새 경로 또는 URL을 getElementById("idOfElement").src에 다시 할당할 수 있습니다.

통사론:

getElementById('idOfElement').src = 'newPath.html'

예제 코드:

<!DOCTYPE html>
<html>
<body>

<h2>Change iframe source in JavaScript</h2>
<p>Click the chosen button to view the chosen page on the website in iframe:</p>

<button onclick="myFunction('https://www.delftstack.com/')">Click to display Home</button>
  <button onclick="myFunction('https://www.delftstack.com/about-us/')">Click to display About</button>
  <br></br>

<script type="text/javascript">
  function myFunction(path) {
    document.getElementById('myIframe').src = path;
  }
  </script>

<iframe id="myIframe" src="https://www.delftstack.com/" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

</body>
</html>

실행 코드

위의 소스 코드에서 지정된 너비와 높이가 있는 <iframe></iframe> 태그를 사용하여 HTML iframe 블록을 만들었습니다. iframe 요소에 ID를 할당했고 기본 src 속성에 "https://www.delftstack.com/" 경로를 할당했습니다.

경로를 인수로 받는 myFunction()을 선언했습니다. 이 함수에서 우리는 html 요소 ID를 수신하고 전달된 경로를 src에 할당하는 document.getElementById()를 사용했습니다.

우리는 iframe 소스를 전환하기 위한 여러 버튼을 만들고 해당 버튼의 클릭 이벤트에 대한 경로로 myFunction()을 호출했습니다.

JQuery의 대체 방법

JQuery에는 기본 메소드 attr()이 있습니다. 이 메서드를 사용하여 속성과 값도 설정할 수 있습니다. 아래와 같이 JQuery를 사용하여 iframe 소스를 재할당할 수도 있습니다.

통사론:

$('#idOfElement').attr('src', 'https://www.delftstack.com/');

요소 ID를 사용하여 기본 attr() 메서드를 호출하고 속성과 값을 전달했습니다.

JavaScript에서 iframe 소스 변경

JQuery의 대체 방법

관련 문장 - JavaScript Element

JavaScript에서 `iframe` 소스 변경