Request for example of window.parentIFrame.sendMessage()

[FriarBroccoli]

Your code is a marvel, working well for me despite my having next to no idea what is going on.

I would like to be able to put a button inside one of my iframes (a menu which occupies a virtual column) so the user can hide that iframe. However I would then like to resize the parent page in response. It seems to me that your window.parentIFrame.sendMessage() method would be one good way of initiating such an adjustment, but I have great difficulty figuring out how things work without an example.

Would you be kind enough to produce the simplest example you can manage (without jquery or $bling please) of this callback method in use. Just sending a literal string from within iframe code that is then displayed by the parent inline or with an alert or anything similar would be most appreciated.

[davidjbradshaw]

I've just added this to the example for you.

[FriarBroccoli]

In index.html (the parent page), could you tell me what "$('p#callback').html(" is? The chrome debugger didn't seem to know.
Can it be replaced with a static string of some sort?
Are all forms of this code unworkable without jquery?

[davidjbradshaw]

It's a bit of jQuery, ignore it and just look at the alert box on the next line.

[FriarBroccoli]

Thanks;

I just needed to delete that block of code to see that all it did was add extra information text on the main page below the iframe. Haven't tested the code in a page of my own yet, but after making a few dozen stupid mistakes I should be good to go.

[FriarBroccoli]

Test successful:

In iframe page I added a button:

text to red

In parent page I added this code:

<script type="text/javascript"> function ChangeMyParentPage(newColor) { document.getElementById("branch_div").style.color=newColor; alert("In ChangeMyParentPage with: " + newColor); return; } iFrameResize({ log : true, // Enable console logging enablePublicMethods : true, // Enable methods within iframe hosted page messageCallback : function(messageData){ ChangeMyParentPage(messageData.message); } }); </script>

And I had a red letter day in my id=branch_div !!!

Thanks;

[davidjbradshaw]

You should look at jQuery, it will make your life much easier. Very simple to learn it's just

$('CSS selector').doSomething().doSomethingElse();