JavaScript는 iframe 자동 높이 조정 및 서로 다른 기본 도메인 이름 간의 도메인 간 교차 도메인을 구현합니다_javascript 기술
- WBOY원래의
- 2016-05-16 15:13:121340검색
Js에는 동일 출처 정책이 있다는 것은 누구나 알고 있습니다. 즉, 서로 다른 기본 도메인 이름이 중첩된 iframe은 Js의 통신을 허용하지 않는다는 의미입니다.
예를 들어 웹사이트가 있고 해당 웹사이트 페이지를 웹사이트에 삽입하고 싶습니다. 그런 다음 iframe을 사용하여 타사 웹사이트의 주소를 참조할 수 있습니다.
그러나 문제는 iframe의 높이가 고정되어 있어 타사 웹사이트와 잘 통합되지 않는다는 것입니다. 예를 들어 타사 웹사이트에서는 롤링 중에 높이를 자동으로 계산하는 폭포 흐름 플러그인을 사용합니다. 로딩, 먼저 교차 도메인에 대해 이야기해 보겠습니다. iframe main 도메인 이름은 서로 다른 교차 도메인 방법을 갖습니다. iframe이 A.com B.com A 웹사이트에 있고 B.com을 참조하는 경우(이 경우 B의 Js) .com은 A.com에 액세스할 수 없습니다. Cross-domain JS는 동일한 출처, 즉 동일한 메인 도메인 이름을 가져야 하는데 어떻게 해야 할까요?
B.com에 iframe을 도입할 수 있습니다. 지금은 C라고 부르겠습니다. 이 iframe은 A.com의 웹페이지를 로드합니다. 이렇게 하면 동일한 소스가 존재하는 경우 B.com의 iframe에 있는 웹페이지가 A.com과 통신할 수 있습니다. 다음으로 B와 C가 통신하는 동안 C와 A가 통신하여 B->A 통신을 완료하도록 하여 B의 높이가 변경되면 C에 통보하고 C는 A에 통보하여 iframe 높이를 조정하도록 합니다.
B와 C 사이의 통신은 실제로 URL 주소를 통해 이루어질 수 있습니다. B.com iframe은 숨김으로 설정되어 있으며, src 주소가 변경되면 C가 이를 수신할 수 있습니다.
말도 안되는 소리 그만하고 코드를 시작하세요
A.com/index.html
<html>
<script src="{$smarty.const.STATIC_URL}/js/jquery-1.7.1.min.js"></script>
<script>
var test = function() {
$('#h1').html('test');
}
</script>
<body>
<h1 id="h1">nba.alltosun.net</h1>
<iframe id="ifm" width="760" height="100" src="http://***.sinaapp.com/"></iframe>
</body>
</html>
B.com/index.html
<html>
<head></head>
<body>
<h1>**.appsina.com</h1>
<button id="button">设置高度</button>
<div id="div" style="height:200px;display:none;"></div>
<script src="http://nba.alltosun.net/js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
window.ifrH = function(e){
var searchUrl = window.location.search;
var b = null;
var getParam = function(url, param) {
var q = url.match(new RegExp( param + "=[^&]*")),
n = "";
if (q && q.length) {
n = q[0].replace(param + "=", "");
}
return n;
}
var f = getParam(searchUrl,"url"),
h = getParam(searchUrl, "ifmID"),
k = getParam(searchUrl, "cbn"),
g = getParam(searchUrl, "mh");
var iframeId = 'testiframe';
var iframe = document.getElementById(iframeId);
var divId = 'alltosun';
if (!iframe){
var iframe = document.createElement('iframe');
iframe.id = iframeId;
iframe.style.display = "none";
iframe.width = 0;
iframe.height = 0;
document.body.appendChild(iframe);
}
if (e && e.type == "onload" && h) {
b.parentNode.removeChild(b);
b = null;
}
if (!b) {
b = document.createElement("div");
b.id = divId;
b.style.cssText = "clear:both;"
document.body.appendChild(b);
}
var l = b.offsetTop + b.offsetHeight;
iframe.src = (decodeURIComponent(f) ||
"http://*****/test2") + "&h=" + l + "&ifmID=" + (h || "ifm") + "&cbn=test" + "&mh=" + g + "&t=" + ( (+ new Date()));
if (e && e.type =="onload") {
window.onload = null;
}
}
window.onload = function() {
ifrH({type: "onload"});
}
// ifrH();
$('button').click(function(){
$('div').show();
ifrH();
})
})
</script>
</body>
</html>
C 프록시 파일
<script>
var search = window.location.search,
getSearchParam = function (search, key) {
var mc = search.match (new RegExp ( key + "=([^\&]*)") ),
ret="";
mc && mc.length && (ret = mc[0].replace( key + "=",""));
return ret;
},
// 参数h
h = getSearchParam(search,"h"),
ifmID = getSearchParam(search,"ifmID"),
cbn = getSearchParam(search,"cbn"),
// 宽高
mh = getSearchParam(search,"mh") || h,
isFunction = function(fn){
return !!fn && !fn.nodeName && fn.constructor != String
&& fn.constructor != RegExp && fn.constructor != Array
&& (/function/i).test(fn + "");
};
try{
if(parent && parent.parent){
ifm = parent.parent.document.getElementById(ifmID);
ifm && mh && (ifm.height=mh);
fn=parent.parent[cbn];
isFunction(fn) && fn.call();
ifm=null;
}
}catch(ex){
console.log(ex);
}
</script>