Hi,

Thank you for this great module! I come across this posting about the possibility of crossdomain iframe resizing, as long as one is able to make a small change on the remote site as describe here. http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content

is it possible at all to implement this to insertFrame?

Thanks,
Iwan

p.s: total noob here, so will need guidance if anything is expected for me to test, etc ...

CommentFileSizeAuthor
#9 insertFrame.zip13.35 KBMarcElbichon
#11 insertFrame.zip13.38 KBMarcElbichon

Comments

MarcElbichon’s picture

MarcElbichon commented

What implementation do you want ?
I only can expose javascript function to resize iframe with a height argument. this can be done by your own by modifying insertFrame.js

iwanaws’s picture

iwanaws commented

guide for dummy will be appreciated.
I assumed part of the steps is that I'll need to insert the code in the remote page and creating helper.html but I wouldn't know how to modify or which part to add/change in insertFrame.js .

MarcElbichon’s picture

MarcElbichon commented

Add this code to insertFrame.js 

function resizeFrame(height){
	resizeFrameByName("iframe1",height);
}

function resizeFrameByName(iframe, height){
	var obj = document.getElementById(iframe);
	if (navigator.userAgent.indexOf("IE")) { 
		obj.height = height; 
		obj.style.height = obj.height;
	} else { 
		obj.style.height = height+'px'; 
	}
}

You now can call resizeFrame(...) from your child page.
IMPORTANT : This function works only if your iframe is named iframe1 (default). If not, change the name in the function or pass it to child via url and call resizeFrameByName(...).

iwanaws’s picture

iwanaws commented

I couldn't get this to work. maybe i am missing something obvious and silly.

here is what i've done.
- add the code that you've provided to insertFrame.js
- add code below to target iframe

<body onload="iframeResizePipe()"> 
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
  function iframeResizePipe()
  {
     var height = document.body.scrollHeight;

     var pipe = document.getElementById('helpframe');

     pipe.src = 'http://mydomain/helper.html?height='+height;
  }
</script>

- created helper.html with below code

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="resizeiFrame()"> 
    <script> 
      function resizeiFrame()
      {
         var height = getParam( 'height' );
         // This works as our parent's parent is on our domain..
         parent.parent.resizeframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

Can you kindly check what i am missing? thx!

MarcElbichon’s picture

MarcElbichon commented

in helper.html change
parent.parent.resizeframe(height);

to

parent.parent.resizeFrame(height);

iwanaws’s picture

iwanaws commented

I fixed the typo, but it still not working as expected. oh well ... it's minor issue. it's one of those thing that would be nice to work but can do without. i'll use continue to use height manually for crossdomain pages. thanks for the effort.

MarcElbichon’s picture

MarcElbichon commented

I've tried your code (with pages in the same domain) and it works.
Have you flushed Drupal cache ?

Can you send me an url for debugging with firebug ?

iwanaws’s picture

iwanaws commented

sorry for the late reply, didn't know there was more reply on this issue.

anyway, I redo the steps again testing both on same domain and crossdomain. I can confirmed that it works as intended for same domain, but doesn't work for crossdomain (which is my intention of getting it to work).

also, unfortunately this is for intranet with the intention of accessing web app elsewhere internally; so i don't have a public url to give you for debugging.

MarcElbichon’s picture

MarcElbichon commented
Status: Needs review » Active
StatusFileSize
new insertFrame.zip13.35 KB

Can you try with this version ? D7 ONLY !!!!

In the filter add crossdomain=true (ie: [[[myexternalurl.domain.com crossdomain=true]]]).
You need to copy insertFrame.js and jquery.ba-postmessage.js in your target site and insert them plus this code in ANY page that can by viewed in the iframe : 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="insertFrame.js"></script>
....
<script>  
(function($) {
	$(document).ready(function() {
    
      var allowedsites = [".mydomain.com","mydrupal.mysociety.org"];
      insertframe_attach_child_receive_event(allowedsites);  
        
    });
    
})(jQuery);
</script>

where allowedsites is an array of regexp for allowed host or domain. You can set ".*" or '.mydomain.com' or 'www.example.com' .

MarcElbichon’s picture

MarcElbichon commented
Status: Active » Needs review
MarcElbichon’s picture

MarcElbichon commented
StatusFileSize
new insertFrame.zip13.38 KB

New version

MarcElbichon’s picture

MarcElbichon commented
Status: Active » Closed (won't fix)

I 've open a new issue for this.
#2087745: Crossdomain feature