HTML iframe 사용 요약 수집_HTML/Xhtml_웹페이지 제작

Iframe 사용 분석


프레임 주위의 가장자리 너비 설정
FRAMEBODER

스크롤 막대가 있는지 여부(YES,NO, AUTO )
SRC

IFRAME에서 호출되는 파일 또는 이미지를 지정합니다(HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
"Picture-in-picture" 효과-IFRAME 태그 사용에 대해 논의
요즘 웹사이트를 보면 인터넷 속도가 약간 느리지만 거의 모든 페이지에 배너를 넣어야 합니다. , 칼럼 사진, 저작권 등 물론 통일된 웹사이트 스타일의 필요성과 광고 효과로 인해 비슷한 것들이 많이 나와도 문제가 없지만, 결국 이러한 '장식'으로 인해 사용자의 지갑은 점점 더 돈이 빠져나가고 있다. " 것들. 이것을 가능하게 하는 방법은 없을까요? 비슷한 것들은 한 번 다운로드하면 다시 다운로드할 필요 없이 콘텐츠 영역이 변경된 웹페이지 콘텐츠만 다운로드되는 건가요?
답은 바로 Iframe 태그를 적용하는 것입니다!
1. Iframe 태그의 활용
Iframe이라면 '잊혀진 구석'에 던져두셨겠지만, 그 형제 Frame이라면 낯설지 않으실 겁니다. 프레임 태그는 프레임 태그입니다. 다중 프레임 구조는 브라우저 창에 여러 HTML 파일을 표시하는 것입니다. 이제 우리는 매우 현실적인 상황에 직면하게 됩니다. 튜토리얼이 있는 경우 각 페이지의 끝에는 내용을 제외하고 "이전 섹션"과 "다음 섹션"에 대한 링크가 있습니다. 게다가 페이지의 다른 부분의 내용도 똑같습니다. 페이지별로 멍청한 페이지를 만드는 것은 너무 지루한 것 같습니다. 이때 문득 다른 부분을 유지할 수 있는 방법이 없을까 하는 생각이 들었습니다. 페이지를 변경하지 않고 튜토리얼만 만드세요. 다른 내용 없이 페이지별 콘텐츠 페이지가 됩니다. 페이지 위로 및 아래로 링크를 클릭하면 튜토리얼 콘텐츠 부분만 변경되고 다른 부분은 변경되지 않습니다. 이렇게 하면 시간이 절약되고, 다른 하나는 튜토리얼에 앞으로 세 개의 긴 변경 사항과 두 개의 짧은 변경 사항이 있을 것이라는 점입니다. 또한 매우 편리하며 더 중요한 것은 광고 배너, 열 목록, 거의 모든 페이지에 포함된 탐색 및 기타 항목은 한 번만 다운로드되고 더 이상 다운로드되지 않습니다. 부동 프레임 태그라고도 하는 Iframe 태그를 사용하여 HTML 디스플레이에 HTML 문서를 삽입할 수 있습니다. Frame 태그와 가장 큰 특징은 이 태그가 참조하는 HTML 파일이 다른 HTML 파일과 독립적으로 표시되지 않고 HTML 파일에 직접 삽입되어 HTML 파일의 내용과 통합되어 전체가 될 수 있다는 점입니다. 또한, 콘텐츠를 반복적으로 작성할 필요 없이 동일한 콘텐츠를 한 페이지에 여러 번 표시할 수도 있습니다.
이제 Iframe 태그 사용에 대해 이야기해 보겠습니다.
Iframe 태그의 사용 형식은

코드 복사

코드는 다음과 같습니다.

src: 파일 경로는 HTML 파일, 텍스트, ASP 등일 수 있습니다.
width, height: "picture-in-picture" 영역의 너비와 높이
스크롤: 지정된 경우 SRC의 HTML 파일이 지정된 영역에 있습니다. 스크롤 옵션이 표시되지 않거나 완료되면 NO로 설정된 경우 스크롤 막대가 자동으로 설정되어 있으면 스크롤 막대가 표시되지 않습니다.
FrameBorder: "Picture-in-picture"를 만들기 위한 영역 테두리의 너비입니다. 인접 콘텐츠와 혼합되며 일반적으로 0으로 설정됩니다.
예:

코드 복사

코드는 다음과 같습니다.

>
2. 상위 폼과 플로팅 프레임 간의 상호 제어. 스크립팅 언어 및 개체 계층 구조에서는 Iframe을 포함하는 창을 상위 ​​폼이라고 하고, 플로팅 프레임을 하위 폼이라고 합니다. 상위 양식에서 하위 양식에 액세스하거나 그 반대로 액세스하려면 프로그래밍 방식으로 양식에 액세스하고 제어하기 전에 개체 계층 구조를 알아야 하기 때문에 관계가 중요합니다.
1. 상위 폼의 하위 폼에 있는 개체에 액세스하고 제어합니다.
상위 폼에서는 Iframe, 즉 하위 폼이 문서 개체의 하위 개체이며, 하위 폼에 직접 액세스할 수 있습니다. 의 스크립트 개체입니다.
이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.
예를 들어, example.htm에 test.htm 파일을 삽입하고 test.htm에서 일부 태그 개체를 제어합니다.

코드 복사

코드는 다음과 같습니다.

test.htm 파일 코드는

hello ,my boy



H1 태그의 텍스트를 hello로 변경하려면 , 얘야, 다음과 같이 사용할 수 있습니다:

document.myH1.innerText="hello,my dear" (문서는 생략 가능)
example.htm 파일에서 Iframe 태그 개체가 가리키는 하위 양식은 다음과 같습니다. 일반적인 DHTML 개체 모델과 일치합니다. 개체 액세스 제어 방법은 동일하므로 다시 설명하지 않습니다.
2. 하위 폼의 상위 폼에 있는 개체에 액세스하고 제어합니다.
하위 폼에서는 상위(부모) 개체를 통해 상위 창의 개체에 액세스할 수 있습니다.
example.htm 등:

코드 복사코드는 다음과 같습니다.

< ;html>

안녕하세요, 제 아내

;



ID 번호 myH2로 Frame1.htm의 제목 텍스트에 액세스하여 "hello, my friend"로 변경하려면 다음과 같이 작성하면 됩니다. :
parent.myH2.innerText="hello,my friend"

여기서 상위 개체는 현재 양식(example.htm이 있는 양식)을 나타냅니다. 자식 폼은 예외 없이 모두 부모 개체를 통해 수행됩니다.
Iframe은 다른 HTML 파일에 포함되어 있지만 상대적으로 독립적이며 "독립 왕국"입니다. 단일 HTML의 특성은 부동 프레임에도 적용됩니다.
Iframe 태그를 통해 변경되지 않은 내용을 Iframe으로 표현할 수 있습니다. 이렇게 하면 동일한 내용을 반복해서 작성할 필요가 없습니다. 이는 프로그래밍의 프로세스나 기능과 비슷합니다. 지루한 수작업이 많아요! 또한, 결정적으로 레이아웃을 조정하기 위해 각 페이지를 수정하는 대신 하나의 상위 양식의 레이아웃만 수정하면 되므로 페이지 수정이 더 가능해집니다.
한 가지 주의할 점은 Nestscape 브라우저는 Iframe 태그를 지원하지 않는다는 점입니다. 그러나 오늘날의 IE 세계에서는 Iframe 태그가 그 자체를 위해서만 널리 사용되는 것은 아닙니다. 웹사이트) 뿐만 아니라 네티즌들이 인터넷 요금을 절약할 수 있도록 하는 것도 어떨까요?
예제

코드 복사

코드는 다음과 같습니다.

iframe>

2 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::
iframe 사용 후 , 스크롤바가 예쁘지 않은 것을 발견하여 2 장의 사진을 사용하여 교체하고 싶습니다. ↑↓
어떻게 구현해야 합니까?

답변:
웹페이지의





을 다음 코드로 바꾸세요. 코드를 복사하세요.

코드는 다음과 같습니다. 다음과 같습니다:

문자 문자 문자 문자 문자

内框架Iframe용 사용
使용 Iframe可以이 一人表格内调用一个외부 문件, 是不常유용적입니다. 。
지금 나는 Iframe标记적 사용을 사용합니다.
Iframe标记的使用格式是:

复代码

代码如下:

> ;
src: 文件的路径，既可是HTML文件，也可以是文本、ASP等;
너비, 높이:"内part框架"区域的宽与高;
스크롤: 当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不take现滚动条;如为Auto : 则自动流现滚动条如为Yes，则显示;
FrameBorder: 区域边框的宽titude，为了让“内部框架“与邻近的内容置为0。
이름 : 框架 字 ， 用来进行识别 。
比如:

当你想用父框架控父框架控父框架时，可以使用： target="框架的name字"来控除使。
IFrame이 IFrame에 있습니다.
유유한 정보가 있습니다.表单() 외부에는 어떤 것이 있나요?





其中designMode는 IFrame의 기능을 향상시키는 데 사용됩니다.可以는 더 많은 의도를 가지고 있습니다. 하단에는 내 정보가 표시됩니다.

')">





다음은 몇 가지 추가 사항입니다.

말할 필요도 없습니다.
Width는 삽입된 페이지의 너비이고, height는 삽입된 페이지의 높이입니다. 스크롤은 페이지 스크롤 막대를 표시할지 여부입니다(선택적 매개변수는 auto, yes, no이며, 이 매개변수를 생략하면 기본값은 auto입니다). ); 프레임 테두리 크기;
참고: URL에는 절대 경로를 사용하는 것이 좋습니다.
범례에 따르면
검은색 88*8. . .
예시 2.
페이지에 프레임이 있는 경우. . 페이지의 링크를 클릭하고 이 그런 다음 기본 열기 모드를 수정합니다. 웹페이지 HEAD에 또는 부분 링크의 대상 프레임이 (**)
　예 3으로 설정됩니다.
페이지를 삽입합니다. 중간 부분만 가져오라고 하세요. 다른 것을 원하지 마십시오. ,. .
　코드:

프레임이 덮는 삽입된 페이지의 깊이 조절 marginwidth=0 marginheight=0 프레임이 덮는 상단 부분의 깊이 조절 vspace=-170
스크롤 막대 스크롤 여부( auto, yes, no) 프레임border 프레임의 테두리 크기, 너비=776 높이=2500 이 프레임의 크기입니다.
1. 페이지에 iframe을 추가합니다.
,
스크롤하면 페이지 스크롤 막대 표시 여부가 표시됩니다. , 선택사항 매개변수는 auto, yes, no입니다. 이 매개변수가 생략되면 기본값은 auto입니다.
2. 하이퍼링크는 삽입된 웹페이지를 가리킵니다. iframe의 이름을 지정하세요. 방법은 인 경우 웹 페이지의 하이퍼링크 문은 다음과 같이 작성되어야 합니다.
3. 프레임 경계선이 1로 설정되면 효과는 다음과 같습니다. 텍스트 상자
투명한 IFRAME 사용
IE5.5 이상에서 지원되어야 합니다.
transparentBody.htm 파일의 태그에 style="Background-color=transparent"를 추가했습니다. " 다음 네 가지 IFRAME을 통해 iframe 배경 투명 효과를 구현하는 방법을 명확하게 이해해야 한다고 생각합니다.
=" Frame3" SRC="transparentBody.htm">

난이도 2 :
창과 플로팅 프레임
간의 상호 제어 스크립팅 언어와 개체 계층 구조에서 Iframe이 포함된 창을 부모 폼이라고 하고, 플로팅 프레임을 자식 폼이라고 합니다. 관계를 명확히 하는 것이 중요합니다. 상위 양식에서 하위 양식에 액세스하거나 그 반대로 액세스할 때 프로그래밍 방식으로 양식에 액세스하고 제어하려면 먼저 개체 계층 구조를 알아야 하기 때문입니다.
1. 상위 양식의 하위 양식에 있는 개체에 액세스하고 제어합니다.
상위 양식에서 Iframe, 즉 하위 양식은 문서 개체의 하위 개체이며, 스크립트에서 하위 양식에 직접 액세스할 수 있습니다. 의 개체
이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.
예를 들어 example.htm에 test.htm 파일을 포함하고 test.htm의 일부 태그 개체를 제어합니다.
　　
test.htm文件代码为:
　　
　　　
　　　　

hello,my boy

　　　
　　
　　如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:
　　document.myH1.innerText="hello,my dear"(其中，document可省)
　　在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
　　2、在子窗体中访问并控制父窗体中对象
　　在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
　　如example.htm：
　　
　　　
　　　　
　　　　

hello,my wife

　　　
　　
　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：
　　parent.myH2.innerText="hello,my friend"
或者parent.document.getElementById("myH2").innerText="hello,my friend"
　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
3:frame的一个子元素访问frame的另一个子元素
例如：框架文件frame.html中嵌入了另外两个html文件

那么现在要在DirectoryTree.html文件中访问Search.html文件中的一个id为section的标签的innerHTML属性，则可以这样：
alert(parent.document.search.section.innerHTML),
其中search是“搜索”div的id，或者：
alert(parent.document.getElementById("search").section.innerHTML),
或者也可以这样：
alert(parent.document.frames["frameSublist"].name)(这是直接访问iframe)
　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。
　　要注意的是，Nestscape6.0之前版本不支持Iframe标记。
　　例子：
1:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓
应该怎么实现呢？
回答：
用下列代码替换网页的

文字 文字 文字 文字 文字

:::::::::::::::::::: :::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::: ::
다음 코드는 IFrame 적응형 높이를 구현할 수 있습니다. 즉, 페이지 길이에 자동으로 적응하여 페이지와 IFrame에 스크롤 막대가 동시에 나타나지 않도록 합니다. .
소스코드는 다음과 같습니다

HTML

被引用文件UserLogin.html：

테이블>

테이블>

会员登录

테이블>
www.baidu.com

함수 리디렉션()
{
parent.document.frames["frameSublist"].location.href="www.baidu.com"
}

용용명：
密码：