load items in iframe clicking flash btn

  • ziyi
  • Born
  • Born
  • ziyi
  • Posts: 2

Post 3+ Months Ago

Hello!

I have a flash header in my html website with the menu in it.

Releasing the menu button i don't want to load the whole page, becouse there is some music in the background also.

How do I call a html content from the flash into an iframe, without refreshing the whole site?

I have already tried on(release){getURL("page.html", "iframeName");} script but it opens new window from my browser...

Thanks in advance

Ziyi
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Skin
  • Student
  • Student
  • User avatar
  • Posts: 76
  • Loc: United Kingdom

Post 3+ Months Ago

your asking on the wrong forum really this is more of a programming issue not flash! but hey ill I answer you question and maybe the captaions of this ship will move it to the relevant forum.

use the ajax method,.. this calls a server side script using requst object in javascript to load html content without refreshing page.

place this in the head of your html file,....

Code: [ Select ]

<script type="text/JavaScript">

function makeObject(){
var x;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
x = new ActiveXObject("Microsoft.XMLHTTP");
}else{
x = new XMLHttpRequest();
}
return x;
}

var request = makeObject();


function getPage(page){
    
    //The function open() is used to open a connection.
    //Parameters are 'method' and 'url'. For this tutorial we use GET.
    //We send it to 'test.php?id=' and add the index from our SELECT form field
    
    
    request.open('post', 'getPage.php');
    
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

    //This tells the script to call parseInfo() when the ready state is changed.
    request.onreadystatechange = parseInfo;

    //This sends whatever we need to send. Unless you're using POST as method, the parameter is to remain empty.
    
    getstr='page='+page;
    request.send(getstr);
}

function parseInfo(){
    if(request.readyState == 1){
        
        //While we are still waiting for a response, we replace whatever's in the div # 'my_div' with
        //the text 'Loading...'.
        document.getElementById('my_div').innerHTML = '<img src="assets/loading.gif" />';
    }
    if(request.readyState == 4){

        //request.responseText holds the response we got from the server.
        //We assign it to a variable and replace the content of 'my_div' when it's done loading
        var answer = request.responseText;

        document.getElementById('my_div').innerHTML = answer;
    }
}
</script>
  1. <script type="text/JavaScript">
  2. function makeObject(){
  3. var x;
  4. var browser = navigator.appName;
  5. if(browser == "Microsoft Internet Explorer"){
  6. x = new ActiveXObject("Microsoft.XMLHTTP");
  7. }else{
  8. x = new XMLHttpRequest();
  9. }
  10. return x;
  11. }
  12. var request = makeObject();
  13. function getPage(page){
  14.     
  15.     //The function open() is used to open a connection.
  16.     //Parameters are 'method' and 'url'. For this tutorial we use GET.
  17.     //We send it to 'test.php?id=' and add the index from our SELECT form field
  18.     
  19.     
  20.     request.open('post', 'getPage.php');
  21.     
  22.     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  23.     //This tells the script to call parseInfo() when the ready state is changed.
  24.     request.onreadystatechange = parseInfo;
  25.     //This sends whatever we need to send. Unless you're using POST as method, the parameter is to remain empty.
  26.     
  27.     getstr='page='+page;
  28.     request.send(getstr);
  29. }
  30. function parseInfo(){
  31.     if(request.readyState == 1){
  32.         
  33.         //While we are still waiting for a response, we replace whatever's in the div # 'my_div' with
  34.         //the text 'Loading...'.
  35.         document.getElementById('my_div').innerHTML = '<img src="assets/loading.gif" />';
  36.     }
  37.     if(request.readyState == 4){
  38.         //request.responseText holds the response we got from the server.
  39.         //We assign it to a variable and replace the content of 'my_div' when it's done loading
  40.         var answer = request.responseText;
  41.         document.getElementById('my_div').innerHTML = answer;
  42.     }
  43. }
  44. </script>



you will see baove I have sent a request to get Page.php
If you dont know php copy and paste the below into a new file and call it getPage.php

PHP Code: [ Select ]
<?php
 
$html=file_get_contents($_POST['page']);
 
echo "html = ".$html;
 
?>
 
  1. <?php
  2.  
  3. $html=file_get_contents($_POST['page']);
  4.  
  5. echo "html = ".$html;
  6.  
  7. ?>
  8.  


this will have to sit in the same directory as your main html file, if you move it you will have to change the path in the request the same as you would any other file.

you will see in the parseInfo function I have sent the response from the php to 'my_div' so create a div element in the body of your html and giv it the id of 'my_div' ( you can call this what u like but make sure to cahnge it in the parseInfo function.

know you can call the getPage function from any button or link etc with the parameter of the name of the html file you wish to load. eg.

Code: [ Select ]
<a href="javascript:;" onclick="getPage('page.html')">show Page</a>


I have zipped up example files for you at
http://www.skindc.co.uk/showPage.zip

use these files for know but make sure you look further into ajax processing so youunderstand it further

G[/url]
  • ziyi
  • Born
  • Born
  • ziyi
  • Posts: 2

Post 3+ Months Ago

Huhh...

Thanks Skin, it is great, i didn't tried your suggestion, but I really hope it will works. And thanks for the detailed "tutorial".

By the way: what should i write for action in the flash file on the button's layer?

?something like this: on(release){getURL("page.html", "iframeName");}

I know your javascript solution isn't iframe...

Ziyi
  • Skin
  • Student
  • Student
  • User avatar
  • Posts: 76
  • Loc: United Kingdom

Post 3+ Months Ago

on the button, use,

onRelease=function(){
getURL("javascript:getPage('page.html')");
}

take not of the double and single qoutes and mahe sure you use the same.

this is the simplest way of communic`ting with javascript from flash, look into on google as there are ways you can have more control between flash and the holding html page.

Iframe is not the best way of doing things as is not yet supported in the w3c standards for xhml. I only using for uploading with ajax.

re post if stuck...

G.
  • ralucamarginean
  • Born
  • Born
  • ralucamarginean
  • Posts: 1

Post 3+ Months Ago

Hi Skin,

I used your advice and it worked. Thanks a lot!
There is just one little problem. The browser's back button isn't active anymore. do you have any idea how to make it work?

Thanks again.

Raluca
  • Skin
  • Student
  • Student
  • User avatar
  • Posts: 76
  • Loc: United Kingdom

Post 3+ Months Ago

By doing this method you are kind of replicating ajax (the hated word) functionality, so in that case you need to store somekind prevPage var in javascript that stores a reference to the previous html page that you loaded in before this one. And then you should be able to override the history object in java to tell it to call your getPage function with the prev html variable as parameter. Hence loading the previous page as if you have just clicked the flash button.

Havn't got the code with me at minute that I have used in the past and has been a while since I touched it (due to being buried in flash development).

If I remember I will post something here later, but in the meantime, you may want to google something like 'ajax back button fix' or 'javascript history set'

Good luck and pm me if youo still stuck and hav'nt posted code.

Gary
  • MrTambourineMan
  • Born
  • Born
  • MrTambourineMan
  • Posts: 1

Post 3+ Months Ago

Hi guys,

this has been really helpful. Just trying to take it a bit further by using frames to separate and divide my page up easier. I have a flash menu on the left-side of my page and i would like to use it to load content into the right of it (the mainframe) for the content. I have a rough version working using the script above without the use of frames, however i think i would have more control for design and layout purposes using frames. I started to try and adjust the script however i am pretty new to java. I have seen a site which i am trying to mimic for layout, see here;
http://www.dworkz.com/

Now this site seems to be using php with this portid thing but i may be worng. But the way they are able to use frames it what im particularly interested in.

So basically if anyone knows how to adapt the script above to be able to use a frame name as well as a div that would be schweet!

Cheers chaps!

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.