J'essaie d'utiliser Ben Almans jquery postmessage pour redimensionner un iFrame. Je utilise plus ou moins son exemple avec différents serveurs et contenus dynamiques.Incohérence de message de Jquery
J'ai aussi posté une question sur ce site, mais il se peut que ce soit une question trop récente pour pouvoir y répondre.
Je l'ai fonctionné en envoyant des messages en tant que domaine croisé, mais le redimensionnement ne fonctionne tout simplement pas. Je republie ce que j'ai posté en tant que Toby ici:
Je ne parviens pas à redimensionner le iFrame de manière cohérente dans les navigateurs. Est-ce que c'est quelque chose que vous avez rencontré? J'ai ajouté un horodatage pour savoir quand chaque fonction est appelée, et c'est assez étrange ...:
- Firefox fonctionne bien - la page enfant s'exécute avant la page parent.
- Chrome 7 va se dilater, pas rétrécir. Horodatage = enfant avant parent
- IE 8 ... parent s'exécute avant l'enfant ...! et iframe augmente de 30 chaque clic sur les liens.
Vous avez une expérience avec ça?
Ajout mes deux pages de référence de code:
Parent
<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>
enfant
<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>