JavaScript iframe 의 상호 조작 에 대한 분석
페이지
세 페이지: 부모 페이지 와 두 개의 키 페이지, 두 개의 키 페이지 는 부모 페이지 의 두 개의 iframe 에 있 습 니 다.
1. 부모 페이지 MainForm. aspx
@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="Test.MainForm" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>
（ ）：<input id="txtParent" name="txtParent" type="text" value="parent" onblur="iframeTest()" />
li>
<li>
<iframe src="FrameA.aspx" id="iframeA">iframe>
li>
<li>
<iframe src="FrameB.aspx" id="iframeB">iframe>
li>
ul>
div>
<script type="text/javascript">
function iframeTest() {
}
script>
form>
body>
html>2. 하위 페이지 A
@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrameA.aspx.cs" Inherits="Test.FrameA" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<script type="text/javascript">
//
function getParent() {
}
//
function getAnotherChild() {
}
script>
head>
<body>
<form id="form1" runat="server">
<div>
1（ ）：<input id="txtUserName" name="txtUserName" type="text" value="jeff wong" onblur="getParent()" />
div>
form>
body>
html>
3. 하위 페이지 B
@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrameB.aspx.cs" Inherits="Test.FrameB" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>title>
head>
<body>
<form id="form1" runat="server">
<div>
2（ ）：<input id="txtUserNameB" name="txtUserNameB" type="text" value="jeffery zhao"/>
div>
form>
body>
html>2. 작업 1, 부모 페이지 작업 하위 페이지 는 부모 페이지 MainForm. aspx 파일 에서 이 루어 져 야 합 니 다.부모 페이지 의 javascript 함수 iframeTest 를 수정 합 니 다. 부모 페이지 에서 하위 페이지 요 소 를 어떻게 가 져 오고 조작 하 는 지 보 겠 습 니 다.
function iframeTest() {
var frame1 = document.getElementById("iframeA");
var frame2 = document.getElementById("iframeB");
var frameA = document.frames["iframeA"]; // var frameAa = document.frames.iframeA;
var frameB = document.frames["iframeB"]; // var frameBb = document.frames.iframeB;
//**********************************************
alert(frame1 == frameA); //false
alert(frame2 == frameB); //false
alert(frame1.src); //FrameA.aspx
alert(frame1.location); //undefined
alert(frameA.src); //undefined
alert(frameA.location); //location
alert(frameA.document.location);
alert(frame1.document.body.innerHTML); // MainForm.aspx body innerHTML
alert(frame1.document.documentElement.innerHTML); // MainForm.aspx html innerHTML
alert(frameA.document.body.innerHTML); // FrameA.aspx body innerHTML
alert(frameA.document.documentElement.innerHTML); // FrameA.aspx html innerHTML
//**********************************************
var childFrameDoc = undefined;
// FrameA.aspx input
if (document.all) {//IE
childFrameDoc = frameA.document; //*** frame1, FrameA.aspx input ***
} else {//Firefox
childFrameDoc = frameA.contentDocument;
}
alert(childFrameDoc.body.innerHTML);
var childTxt = childFrameDoc.getElementById("txtUserName");
var childTxtByName = childFrameDoc.getElementsByName("txtUserName");
alert(childTxt == childTxtByName[0]); //true
alert(childTxt.value); //jeff wong
alert(childTxtByName[0].value); // jeff wong
// FrameB.aspx input
childFrameDoc = undefined;
if (document.all) {//IE
childFrameDoc = frameB.document;
} else {//Firefox
childFrameDoc = frameB.contentDocument;
}
alert(childFrameDoc.body.innerHTML);
var childTxt = childFrameDoc.getElementById("txtUserNameB");
var childTxtByName = childFrameDoc.getElementsByName("txtUserNameB");
alert(childTxt == childTxtByName[0]); //true
alert(childTxt.value); //jeffery zhao
alert(childTxtByName[0].value); // jeffery zhao
}소결: a, iframe 대상 이 있 는 페이지 의 대상 모델 (document. getElement ById ("iframeId") 을 통 해 얻 을 수 있 습 니 다. iframe 대상 의 속성 에 접근 할 수 있 지만 그 내용 에 접근 할 수 없습니다.b. frames 집합 은 iframe 내용 에 대한 접근 을 제공 합 니 다 (document. frames [iframeName] 을 통 해 가 져 옵 니 다).일반적으로 우 리 는 frames 집합 을 사용 하여 iframe 에 포 함 된 요 소 를 읽 습 니 다.c. iframe 의 src 나 border, scrolling 등 attributes (property 와 같은 개념 이 아니 라 property 는 태그 에 쓸 수 없습니다. 예 를 들 어 scrollHeight, innerHTML 등) 를 바 꾸 려 면 document. getElement ById 방법. d, iframe 안의 함수 나 dom 요 소 를 사용 해 야 합 니 다 (예 를 들 어 iframe 의 document. body 의 내용 을 얻 으 려 면).변 수 는 frames 를 통 해 집합 해 야 합 니 다. 완전한 DOM 모델 을 가 져 왔 기 때문에 id 를 통 해 얻 는 방법 은 하나의 object 를 가 져 왔 을 뿐 입 니 다. e, iframe 페이지 가 완전히 불 러 오지 않 았 을 때 iframe 의 dom 모델 을 호출 하면 오류 가 발생 할 수 있 습 니 다. 2. 하위 페이지 는 부모 페이지 로 작 동 합 니 다. 여 기 는 하위 페이지 FrameA. aspx 를 예 로 들 수 있 습 니 다.하위 페이지 A 에서 함수 getParent 를 통 해 MainForm. aspx 의 dom 요 소 를 가 져 온 다음 에 정상 적 인 dom 요소 에 따라 조작 하면 됩 니 다.
//
function getParent() {
if (self != top) {
var oDoc = top.parent.document;
alert(oDoc.body.innerHTML);
alert(oDoc.documentElement.innerHTML);
alert(oDoc.frames.length); // ：2 iframe
//
var oTxt = oDoc.getElementById("txtParent");
alert(oTxt.value);
}
else alert(" ");
}3. 하위 페이지 에서 하위 페이지 를 조작 하려 면 홈 페이지 를 통 해 다른 하위 페이지 를 간접 적 으로 가 져 와 야 합 니 다.여기 에는 하위 페이지 A 를 예 로 들 기도 한다.홈 페이지 를 통 해 우 리 는 간접 적 으로 하위 페이지 B 를 얻 은 다음 에 dom 을 정상적으로 조작 하 는 것 처럼 하위 페이지 A 는 하위 페이지 B 에 대한 제어 와 조작 을 완성 합 니 다.getAnotherChild () 함수 수정:
//
function getAnotherChild() {
alert(self.location.href); // url
// ，
if (self != top) {
var oDoc = top.parent.document;
var oAnotherFrame = oDoc.frames["iframeB"]; // iframe
alert(oAnotherFrame.location);
alert(oAnotherFrame.document.body.innerHTML);
alert(oAnotherFrame.document.documentElement.innerHTML);
var oTxt = oAnotherFrame.document.getElementById("txtUserNameB");
alert(oTxt.value); //jeffery zhao
}
}
메모: getAnotherChild () 함 수 를 수정 한 다음 하위 페이지 A (FrameA. aspx) 의 textUserName 의 onblur 이 벤트 를 onblur = "getAnotherChild ()" 로 바 꾸 면 결 과 를 볼 수 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
