Я пытаюсь использовать Ben Almans jquery postmessage для изменения размера iFrame. Я более или менее использую его пример с разными серверами и динамическим контентом.JQuery postmessage несоответствие
Я также отправил вопрос на этот сайт, но на самом деле это может быть слишком новичок.
У меня есть работа, отправляющая сообщения в виде перекрестного домена, но изменение размера просто не работает. Я просто переписываю то, что я разместил как Тоби здесь:
Я не могу заставить iFrame последовательно изменять размеры в браузерах. Это соприкосновение, с которым вы столкнулись? Я добавил временную метку, чтобы знать, когда вызывается каждая функция, и ее довольно странно ...:
- Firefox отлично работает - дочерняя страница работает до родительской страницы.
- Chrome 7 будет расширяться, а не сокращаться. Timestamp = дочерний элемент перед родителем
- IE 8 ... родительский бежит до ребенка ...! и iframe увеличивается на 30 каждый щелчок по ссылкам.
У любого есть опыт?
Добавление два моих страниц для справки кода:
Родительских
<html>
<head>
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"></script>
<script>
$(function(){
// Keep track of the iframe height.
var if_height,
// Pass the parent page URL into the Iframe in a meaningful way (this URL could be
// passed via query string or hard coded into the child page, it depends on your needs).
//src = 'http://oslsrv03/cross_remote/cross_remote.htm#' + encodeURIComponent(document.location.href),
src = 'http://oslsrv01/crosstest/child_postmessage.html#' + encodeURIComponent(document.location.href),
// Append the Iframe into the DOM.
iframe = $('<iframe " src="' + src + '" width="100%" height="100" scrolling="no" frameborder="1"><\/iframe>')
.appendTo('#zshop');
//alert(src);
// Setup a callback to handle the dispatched MessageEvent event. In cases where
// window.postMessage is supported, the passed event will have .data, .origin and
// .source properties. Otherwise, this will only have the .data property.
$.receiveMessage(function(e){
// Get the height from the passsed data.
var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1'));
if (!isNaN(h) && h > 0 && h !== if_height) {
// Height has changed, update the iframe.
iframe.height(if_height = h);
}
console.log("beskjed mottat og høyden vi fikk er: " + h);
var currentDate = new Date()
console.log("tid parent: " + currentDate.valueOf())
// An optional origin URL (Ignored where window.postMessage is unsupported).
}, 'http://oslsrv01');
// And for good measure, let's send a toggle_content message to the child.
$('<a href="#">Show/hide Iframe content - dette sender beskjeden til iframen.<\/a>')
.appendTo('#nav')
.click(function(){
$.postMessage('toggle_content', src, iframe.get(0).contentWindow);
return false;
});
});
</script>
</head>
<body style="background-color:orange">
<div id="nav"></div>
<div id="test">
<div id="zshop" style="border: 3px solid red"></div>
</div>
dette er slutten
</body>
Детских
<html>
<head>
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"></script>
<script>
$(function(){
// Get the parent page URL as it was passed in, for browsers that don't support
// window.postMessage (this URL could be hard-coded).
var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, '')),
link;
// The first param is serialized using $.param (if not a string) and passed to the
// parent window. If window.postMessage exists, the param is passed using that,
// otherwise it is passed in the location hash (that's why parent_url is required).
// The second param is the targetOrigin.
function setHeight() {
$.postMessage({ if_height: $('body').outerHeight(true) }, parent_url, parent);
//alert("barn sender beskejd og høyden som sendes er: " + $('body').outerHeight(true));
console.log("barn sender beskejd og høyden som sendes er: " + $('body').outerHeight(true));
var currentDate = new Date()
console.log("tid child: " + currentDate.valueOf())
};
// Bind all this good stuff to a link, for maximum clickage.
link = $('<a href="#">Show/hide content<\/a>')
.appendTo('#nav')
.click(function(){
$('#toggle').toggle();
$('#stor').toggle();
setHeight();
return false;
});
// Now that the DOM has been set up (and the height should be set) invoke setHeight.
setHeight();
// And for good measure, let's listen for a toggle_content message from the parent.
$.receiveMessage(function(e){
if (e.data === 'toggle_content') {
link.triggerHandler('click');
}
}, 'http://oslsrv03'); //http://127.0.0.1
});
</script>
</head>
<body style="background-color:white;border: 3px solid black">
<div id="nav"></div>
<div id="toggle">
nå fra oslsvr03
<div style="height:200px; background-color:blue;"></div>
</div>
<div id="stor" style="height:800px; background-color:orange; display: none">Denne skal ikke vises hele tiden!!!</div>
</body>