how to call function in iframe w/parameter from parent window?

classic Classic list List threaded Threaded
4 messages Options
jjc
Reply | Threaded
Open this post in threaded view
|

how to call function in iframe w/parameter from parent window?

jjc
Ok, no takers on my last query; I understand. How about this:

I'd like to call shadowbox with a function taking a single parameter, and then feed that parameter to a function in the page showing in the resultant iframe.

My grasp on js is still pretty fragile, so I'm just groping around here, but something like the psuedo-code:



SBiframe would call

Shadowbox.open({
    player: 'iframe',
    title: 'page images',
    content: 'pageimages3.html'});

When pageimages3.html loads, by some magic the function pager() on that page will be called with the parameter '005'

Is something like this possible, or am I missing something big, fat, and obvious about variable scope and suchlike?

any takers?
Jon
Reply | Threaded
Open this post in threaded view
|

Re: how to call function in iframe w/parameter from parent window?

build
That is a javascript question rather than shadowbox.

I'm bloody hopeless with JS but I would be totally lost without the help of Firebug.

google will undoubtedly render a 100 different possibilities.

but ... just feed the variable to window.onload
there's a few examples here:
http://www.web.build.id.au/shadowbox/index.php

there may be a JS forum on nabble?
or ask at one of these
http://www.google.com.au/search?source=ig&hl=en&rlz=&q=javascript+forum&btnG=Google+Search&meta=lr%3D


sorry i can be more help,
beers,
build

jjc
Reply | Threaded
Open this post in threaded view
|

Re: how to call function in iframe w/parameter from parent window?

jjc
Build,

Good of you to give it a try. Thanks.

After making myself crazy, I started to get my head around the Shadowbox onFinish option. A way to get what I want might be to programmatically call SB, load an iframe into it, and then modify the contents of $('#shadowbox_content'). The simplest example I could construct of this scenario can be seen here:

<http://home.myuw.net/jjcrump/Timelines/itinerary/test.html>

Sadly, it doesn't work. I'm clearly not understanding something basic. When the iframe is open in SB, if I execute:

$('#shadowbox_content').contents().find('#testdiv').text('replacement text');

In the firebug console, it has the expected effect, but when onFinish calls editIframe(), nothing happens; no error in fb, nothing.

Now It's not clear to me which thing I'm not understanding: jQuery, Shadowbox, or some simple but fundamental thing about javascript. If someone could please put me out of my misery and suggest why this is not working, I'd be very much obliged.
jjc
Reply | Threaded
Open this post in threaded view
|

Re: how to call function in iframe w/parameter from parent window?

jjc
This post was updated on .
In reply to this post by jjc
In case anyone is as clueless as I, herewith, a solution:

So far as I can tell, you can't do this with an iFrame. This is the security constraint imposed by javascript I think. This for the same reason that you can't access file directories etc. with js.

So I thought I would call shadowbox on a hidden div instead. This worked fine but I still couldn't figure out how to pass a parameter from the calling element to a function that would be called _after_ Shadowbox had opened and loaded the html from #page_images.

I thought I'd try calling shadowbox from a script, and that worked too, but still the problem, how to pass a parameter from the calling function to Shadowbox. The html I wanted to display contained a paging mechanism for navigating a large directory of files and I wanted that mechanism to be available to the user rather than just displaying the single image called for.

After a ludicrous amount of trial and error I finally hit upon the right incantation. Note the comments on the bits that were especially problematic. I will leave the example up at <http://home.myuw.net/jjcrump/Timelines/itinerary/test.html> for a while if anyone is interested. If cleaner code suggests itself to you, or you note errors, I hope you'll post any suggestions you may have here.


<script type="text/javascript">
Shadowbox.loadSkin('classic', 'shadowbox-2.0-code/src/skin');
Shadowbox.loadLanguage('en', 'shadowbox-2.0-code/src/lang');
Shadowbox.loadPlayer(['html'], 'shadowbox-2.0-code/src/player');


window.onload = function(){
        Shadowbox.init();
};

function pager() { // accepts input from forward and back buttons,
// a textfield, and two option lists. It's ugly and klugy,
// full of regex stuff, and I've omited it here out of embarassment.
}

// this is the function called by clicking on the anchor element below.
function loadPage(pgno){
        Shadowbox.open({
                // It appears that the onFinish option must take a function _object_.
                // It does not call the function directly. Thanks punkymonky.
                options: {
                        onFinish: function(){
                                pager(pgno);
                        },
                        enableKeys: false, // so that you can type into the textfield.
                },
                // type: 'inline', // this appears to be unnecessary, old version?
                player: 'html',
                title: 'Page Images',
                height: 1000,
                width: 1000,
                content: $('#page_images').html()
                // The content key of this hash takes actual html, in this case,
                // the html derived from a hidden div using jQuery.
                // Just a URL here won't do: it just gets rendered as text.
        });
};

</script>
</head>

<body>
<div id="container" style="text-align: center;">
        <a href="#" onclick="loadPage('010'); return false;">page images</a><br />
        <!-- this can be implemented more unobtrusively using jQuery -->
etc.
.
.
.