Databases
StackOverflow2013
Postsdbo
POJquery postmessage inconsistency
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery postmessage inconsistency
    primarykey
    data
    text
    <p>I'm trying to use <a href="http://benalman.com/projects/jquery-postmessage-plugin/" rel="nofollow">Ben Almans jquery postmessage</a> to resize an iFrame. I'm more or less using his example with different servers and dynamic content.</p> <p>I've posted a question to that site as well, but it might be a too newbie question to actually answer.</p> <p>I've got it working sending messages as cross domain, but the resize is just not working out. I'm just reposting what I posted as Toby here:</p> <blockquote> <p>I can't get the iFrame to consistently resize across browsers. Is this someting you have encountered? I added a timestamp to know when each function is called, and its quite strange...:<br> - Firefox works fine - childpage runs before parentpage.<br> - Chrome 7 will expand, not shrink. Timestamp = child before parent<br> - IE 8... parent runs before child...! and iframe increases by 30 each click on either links.</p> </blockquote> <p>Any have any experience with this?</p> <p>Adding my two pages for code reference:<br> <strong>Parent</strong> </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(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 = $( '&lt;iframe " src="' + src + '" width="100%" height="100" scrolling="no" frameborder="1"&gt;&lt;\/iframe&gt;' ) .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+)(?:&amp;|$)/, '$1' ) ); if ( !isNaN( h ) &amp;&amp; h &gt; 0 &amp;&amp; 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. $( '&lt;a href="#"&gt;Show / hide Iframe content - dette sender beskjeden til iframen.&lt;\/a&gt;' ) .appendTo( '#nav' ) .click(function(){ $.postMessage( 'toggle_content', src, iframe.get(0).contentWindow ); return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body style="background-color:orange"&gt; &lt;div id="nav"&gt;&lt;/div&gt; &lt;div id="test"&gt; &lt;div id="zshop" style="border: 3px solid red"&gt;&lt;/div&gt; &lt;/div&gt; dette er slutten &lt;/body&gt; </code></pre> <p></p> <p><strong>Child</strong> </p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script language="javascript" src="jquery.ba-postmessage.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(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 = $( '&lt;a href="#"&gt;Show / hide content&lt;\/a&gt;' ) .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 }); &lt;/script&gt; &lt;/head&gt; &lt;body style="background-color:white;border: 3px solid black"&gt; &lt;div id="nav"&gt;&lt;/div&gt; &lt;div id="toggle"&gt; nå fra oslsvr03 &lt;div style="height:200px; background-color:blue;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="stor" style="height:800px; background-color:orange; display: none"&gt;Denne skal ikke vises hele tiden!!!&lt;/div&gt; &lt;/body&gt; </code></pre> <p></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAdam Crossland
    1. USTrashcan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery postmessage inconsistency
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJquery postmessage inconsistency
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJquery postmessage inconsistency
      1. USMark B
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload