> 웹 프론트엔드 > JS 튜토리얼 > 웹 페이지에 외부 웹 페이지를 삽입하는 방법_javascript 팁

웹 페이지에 외부 웹 페이지를 삽입하는 방법_javascript 팁

WBOY
풀어 주다: 2016-05-16 19:16:04
원래의
2145명이 탐색했습니다.

설명: 탭 인터페이스를 사용하면 이 DHTML 스크립트를 사용하여 IFRAME 태그의 도움으로 외부 웹 페이지를 페이지에 인라인으로 표시할 수 있습니다. 우리는 사용자가 원할 때 전체 브라우저 창에서 웹페이지를 로드할 수도 있는 기능을 추가했습니다. 이 스크립트는 IE5 및 NS6에서 작동하며 나머지 부분에서는 성능이 저하됩니다(탭은 단순한 일반 링크이므로). 시원한! 
1단계: 아래 CSS 및 DHTML 스크립트를  페이지 섹션:

复system代码 代码如下:

 

 

/*********************************************** 
* 탭으로 표시 문서 뷰어 스크립트-? Dynamic Drive DHTML 코드 라이브러리(www.dynamicdrive.com)
* 이 공지는 합법적인 사용을 위해 그대로 유지되어야 합니다.
* 전체 소스 코드를 보려면 http://www.dynamicdrive.com/에서 Dynamic Drive를 방문하세요.
* **********************************************/ 

var selectedtablink="" 
var tcischecked=false 

함수 핸들링크(aobject){ 
selectedtablink=aobject .href 
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false 
if (document.getElementById && !tcischecked){ 
var tabobj=document.getElementById("tablist") 
var tabobjlinks=tabobj.getElementsByTagName("A") 
for(i =0;  itabobjlinks[i].className="" 
aobject.className="current" 
document.getElementById("tabiframe").src=selectedtablink 
return false 

else 
return true 


function handleview(){ 
tcischecked=document.tabcontrol.tabcheck.checked 
if (document. getElementById && tcischecked){ 
if (selectedtablink!="") 
window.location=selectedtablink 



 
탭 모양(예: 색상)을 맞춤설정하려면 CSS를 편집하세요. 스크립트를 전혀 수정할 필요가 없습니다.
2단계: 아래 코드를  페이지 섹션:
复代码 代码如下:

 
  • Google
  •  
  • Yahoo
  •  
  • MSN
  •  
  • News.com
  •  
  • 동적 드라이브
  •  
     
     

     
     대신 브라우저 창에서 탭 링크를 엽니다. 
     
    위의 HTML 코드는 외부 문서를 포함하는 데 사용되는 탭 링크와 IFRAME 태그를 렌더링합니다. URL을 원하는 대로 변경하세요. 이제 탭 링크가 많은 경우 구분선을 추가하여 별도의 줄에 표시되도록 할 수 있습니다.
    复system代码 代码如下:

     
  • Google
  •  
  • 야후
  •  
  • MSN
  •  
     
  • News.com
  •  
  • 동적 드라이브>
  •  
     
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 추천
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿