자바스크립트 세트 Iframe Src

Michael Zippo

iframe HTML 태그는 웹 문서를 웹 페이지에 포함합니다. 포함된 문서는 PDF, 웹 페이지 또는 기타 리소스일 수 있습니다. src 속성은 온보드 리소스의 위치를 정의합니다.

웹 문서 (예: PDF 또는 Google 지도의 지도)를 HTML을 사용하여 다른 페이지에 표시합니다.

여기서 HTML </em>이 사용됩니다. HTML <em>< iframe></em> 태그는 다른 웹 페이지와 같은 외부 개체를 단일 웹 페이지에 포함하는 데 사용됩니다. 이 튜토리얼에서는 HTML <em><iframe></em> 태그를 사용하여 웹 리소스를 웹 페이지에 삽입하는 방법을 예제와 함께 설명합니다.</p><h2>HTML iframe</h2><p>HTML iframe 또는 포함된 프레임은 페이지에 외부 웹 문서를 표시합니다. HTML <iframe> 태그를 사용하여 지도, PDF, 비디오 또는 기타 리소스를 포함할 수 있습니다.</p><p>인라인 프레임에 저장된 코드는 웹페이지의 나머지 부분과 독립적입니다. 웹페이지에 적용되는 스타일 또는 자바스크립트는 iframe에 적용되지 않습니다.</p><p>HTML <em><iframe></em> 태그의 구문은 다음과 같습니다.</p> <p><em><iframe ></em> 태그는 iframe을 만드는 데 사용됩니다. iframe <em>src</em> 속성을 지정했습니다. 속성에는 웹 페이지에 포함하려는 HTML 요소의 위치가 포함됩니다. <a href="/url-vs-uri/"> HTML URL </a>이어야 합니다.</p><h2>HTML iframe의 예</h2><p>예를 들어 어떻게 <em><iframe></em> 태그가 작동합니다.</p> </div> </div> <p>지역 워싱턴 DC의 역사적인 비즈니스. 그들은 우리가 미국 헌법의 탄생에 대한 Khan Academy의 비디오가 포함된 페이지를 만들기를 원합니다. 이 페이지는 회사에 관심이 있는 모든 사람에게 권장되는 자료입니다. 다음 코드를 사용하여 웹사이트에 비디오를 삽입할 수 있습니다.</p> <p>코드 반환:</p> </a> </div> < 도 사용될 클래스 = "WP 화상 블록"> <IMG SRC = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"ALT = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"> </도> <p> <em><iframe></em>을 사용하여 외부 웹 리소스를 웹페이지에 삽입합니다. 우리가 구축한 웹 리소스는 링크 "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com / 임베드 / Rk8dCnKIfP4 </a> ". 이것은 역사적 사회가 웹사이트에 보여주고자 하는 비디오를 나타냅니다.</p><h4> HTML iframe의 높이와 너비 </h4> <p>높이와 너비 속성은 iframe의 크기를 정의하는 데 사용됩니다. . 지역 워싱턴 DC 역사 협회가 해당 사이트의 동영상을 확대하기를 원한다고 가정해 보겠습니다.</p><p>YouTube 동영상의 너비를 500픽셀로, 높이를 300픽셀로 설정하겠습니다.</p><p>p> <p>코드 반환:</p><Figure class = "wp-image-block"> <img src = "https: / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "ALT ="YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "> </ 그림> <P> 우리의 포함 된 비디오는 지금 500 픽셀 폭과 우리의 HTML 문서에 300 픽셀 높다. 이렇게 하면 사람들이 </ figure> <p>웹사이트</p>>에서 우리 웹사이트를</p> 쉽게 볼 수 있습니다. 또는 <a href="/css-height-and-width/ "> CSS를 사용한 iframe 태그의 너비 및 높이 </a>. 그러나 HTML은 높이와 무게 속성을 지원하므로 이것이 필요하지 않습니다.</p><h2>HTML iframe에서 테두리 제거</h2><p><em><iframe></em>으로 작업할 때 내용이 테두리로 둘러싸여 있음을 알 수 있습니다. 이 테두리를 제거하려면 <a href="/css-borders/"> <em>border: 없음 ;</em> </a> <a href="/css-borders/">를 사용할 수 있습니다. CSS 속성 </a>.</p><p>역사 사회에서 YouTube 동영상 주변의 경계선을 사이트에서 제거하도록 요청했습니다. 다음은 테두리를 제거하는 데 사용할 코드입니다.</p> <p>코드 반환:</p 이제> <클래스 얼굴 = "WP 화상 블록"> <IMG SRC = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"ALT = "C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </도> <p> 동영상에 더 이상 테두리가 없습니다.</p><h2>HTML iframe 링크의 대상</h2><p>또한 <em><iframe></em> 태그를 링크의 대상 프레임으로 사용할 수 있습니다. . HTML 링크의 target 속성을 사용하여 링크의 대상 프레임으로 iframe을 정의할 수 있습니다. 대상 HTML 속성은 <em><iframe></em>의 name 속성을 참조해야 합니다.</p><p>역사 사회에 의 Article I에 있는 웹사이트에 표시되기를 원하는 또 다른 비디오가 있다고 가정합니다. 미국 헌법. 이 동영상도 Khan Academy에서 게시했습니다.</p> </a> </div> <p>웹 페이지에서 <em>탄생</em> 텍스트를 클릭하면 <em>주 헌법의 탄생 동영상 - United</em>는 iframe에 표시되어야 합니다. 텍스트 <em>Article I</em>을 클릭하면 헌법 I조에 대한 비디오가 렌더링되어야 합니다.</p><p>우리는 다음을 사용할 수 있습니다. 이를 수행하는 다음 코드:</p> <p>우리 코드 반환:</p><그림 클래스 = "wp -block-image"> <img src = "https: //lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr "고도는 ="> </ 그림 RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr은 "> <p는> 기본적으로 미국의 헌법의 탄생의 비디오가 iframe에 말했다. iframe의 내용은 헌법 제1조에 대한 Khan Academy 비디오를 가리키도록 변경됩니다. 이것은 <em>제 I</em> URL을 클릭할 때 발생합니다.</p> </div> <p><em>탄생</em>을 클릭할 때 이 비디오가 아직 표시되지 않은 경우 iframe은 헌법 탄생에 대한 비디오로 리디렉션됩니다.</p><h2>결론</h2><p>HTML <em><iframe></em> 태그는 웹 페이지와 같은 외부 웹 리소스를 다른 웹 페이지에 삽입합니다. 이것은 사이트에 지도, 파일, 비디오 또는 기타 웹 페이지를 추가하려는 경우에 유용합니다.</p><p>이 자습서에서는 예제를 참조하여 HTML <em><iframe></em 사용 방법을 설명했습니다. > 웹 페이지에 외부 웹 리소스 표시 <a href="/learn-html / "> </a> <a href="/learn-html/?> 학습 가이드 하이퍼텍스트 마크업 언어 </a>.</p>