브라우저 홈 페이지, iframe, 하위 창의 상호작용
var ifs = document.getElementById('iframeID').contentWindow.document; \\ iframe document
document.getElementById('iframeID').contentWindow.jsMethod(); \\ iframe JS
ifs.getElementById('elementID').onclick(function(){alert('function binding in main page!');}); \\ iframe 하위 iframe 작업 홈 페이지:
var pp = parent.document; \\ document
parent.jsMethod(); \\ JS
pp.getElementById('elementID').onclick(function(){alert('function binding in main page!');}); \\ iframe iframe 주 창 작업 하위 창:
var nw = window.open("about:blank");
var nd = nw.document; \\ document
nw.jsMethod(); \\ JS 하위 창에서 주 창을 조작하려면 다음과 같이 하십시오.
var od = opener.document; \\ document
opener.showJS(); \\ js샘플 코드:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
var nw;
var injectHtml = '<hr><div><p>inject success</p>\
<div>iframe test<input type="button" value="test parent DOM" onclick="parent.document.getElementById(\'showtext\').innerHTML=\'parent element changed!\'" >\
<input type="button" value="test parent JS" onclick="parent.showJS();" ></div>\
<div>new window test<input type="button" value="test parent DOM" onclick="opener.document.getElementById(\'showtext\').innerHTML=\'parent element changed!\'" >\
<input type="button" value="test parent JS" onclick="opener.showJS();" ></div>\
<div>method binding<input type="button" value="open parent new window" id="bindingmethod" >\
<input type="button" value="show iframe" id="binding2"></div>\</div>';
$(document).ready(function(){
});
function injectWithIframe(html){
if (nw) {nw.close()};
var iframe = '<iframe src="about:blank" frameborder="0" name="FirebugUI" id="FirebugUI" style="border: 0px; visibility: visible; z-index: 2147483647; position: fixed; width: 100%; left: 0px; bottom: 0px; height: 241px; display: block;"></iframe>';
$("#iframediv").append(iframe);
var ifs = document.getElementById('FirebugUI').contentWindow.document;
$(ifs.body).html(html);
$('#bindingmethod', ifs.body).click(this.opennewwithhtml);
}
function opennewwithhtml(){
openInNewWindow(injectHtml);
}
function openInNewWindow(html){
$('#iframediv').empty();
nw = window.open("about:blank");
$(nw.document.body).html(html);
$('#binding2', nw.document.body).click(this.showIframe);
}
function showIframe(){
injectWithIframe(injectHtml)
}
function showJS(){
$('#showtext').text('parent JS called!');
}
</script>
</head>
<body>
<div>
<input type="button" value="inject iframe" onclick="javascript:injectWithIframe(injectHtml)" >
<input type="button" value="inject new window" onclick="javascript:openInNewWindow(injectHtml)" >
</div>
<div id="showtext"></div>
<div id="iframediv"></div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
