Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Embeded object - how do I access?

Status
Not open for further replies.
crvoss

crvoss

Programmer
May 2, 2005
21
US
I am embedding a SVG drawing into a HTML page. There are several javascript function within the SVG that I need to run. There are several variables that the SWG functions need to access also which are external to the embeded SVG (i.e. in a javascript section within the HTML). How do I "get at" the functions in the SVG from the javascript within the HTML and how do I access the variable (they were set up as global) from the javascript within the SVG?

The javascript variables are here in the HTML.
Code: 
<script type='text/javascript'>
   var js_u_num = new Array($js_u_num);
   var js_u_stat = new Array($js_u_stat);
   var js_u_size = new Array($js_u_size);
   var js_u_desc = new Array($js_u_desc);
</script>

The HTML side call to the SVG javascript function.
Code: 
<body onLoad='setcolors()'>

The SVG side javascript function I need to call.
Code: 
function setcolors() {
   for(Idx = 0; Idx <= $Idx; Idx++) {
      document.getElementById('2A').setAttributeNS(null,'fill','rgb(152,206,250)');
   }
}
This function is just a test to try to gain access to it from the HTML. When that is solved this function will need access to the array variable, shown above.

Can anybody help?
 
Sort by date Sort by votes
is that php? Can u post a link to your test site or more code?
 
Upvote 0 Downvote
Yes, the first code section has php in it. The second is HTML with a call to a javascript function (setcolor()). The third is a function that the previous code is calling. It includes some svg stuff, which might be confusing if you aren't familiar with it. I don't have an up to date test site and to include all the code would be massive (over 250kbytes) for this single page. What might help is the following code, which is the HTML/PHP code that builds the page containing the embeded SVG drawing.

Code: 
function maps() {
   global $lData;
   include("inc/units.inc.php");
   $u_lst = explode("~", getunitlst("units"));
   $cnt = count($u_lst);
   $Idx = 0; $js_u_num = ""; $js_u_stat = ""; $js_u_size = ""; $js_u_desc = "";
   foreach ($u_lst as $unit) {
      $unit = explode("|", $unit);
      list(, $u_num[$Idx], $u_stat[$Idx], , , , , $u_size[$Idx], , , $u_desc[$Idx]) = $unit;
      if($Idx) {$js_u_num .= ", "; $js_u_stat .= ", "; $js_u_size .= ", "; $js_u_desc .= ", ";}
      $js_u_num .= "'" . $u_num[$Idx] . "'";
      $js_u_stat .= "'" . $u_stat[$Idx] . "'";
      $js_u_size .= "'" . $u_size[$Idx] . "'";
      $js_u_desc .= "'" . $u_desc[$Idx] . "'";
      $Idx++;
   }
   if($_GET[data] == 1) {
      $Next = 2;
      $Story = "botStory.svg";
   } else {
      $Next = 1;
      $Story = "uprStory.svg";
   }
   echo("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
   <html lang='en'
   <head>
      <title>Level</title>
      <script type='text/javascript'>
         var js_u_num = new Array($js_u_num);
         var js_u_stat = new Array($js_u_stat);
         var js_u_size = new Array($js_u_size);
         var js_u_desc = new Array($js_u_desc);
      </script>
   </head>
   <body onLoad='document.embeds[0].setcolors()'>
      <center><h2>Level #$_GET[data]</h2></center><hr>
      <embed src='$Story' width='800' height='700' type='image/svg+xml' pluginspage='[URL unfurl="true"]http://www.adobe.com/svg/viewer/install/'[/URL] />
      <form name='maps' action='data.php' method='GET' enctype='application/x-[URL unfurl="true"]www-form-urlencoded'>[/URL]
         <input type='hidden' name='func' value='getmap'/>
         <input type='hidden' name='sid' value='$lData[sessid]'/>
         <input type='hidden' name='data' value='$Next'/>
         <br/><input type='submit' name='new_map' value='Next Level' size='40'/>
      </form>
   </body>
   </html>");
}

(Sorry about the coding style - a self made programmer) You'll notice the HTML includes an embeded object -- the SVG drawing. The question is essentially "How do I access objects within that embeded object with javascript external to it?" and vice versa "How do I access javascript global variables which are external to the embeded object with javascript code within the embeded object?".

Thanks in advance.
 
Upvote 0 Downvote
[1] The way to let SVGDocument's global variables and top-level functions exposed to the external "world" which is the html page is to properly set it up "inside" the svg document first and above all as a pre-requisite.

[1.1] In the svg document, add the below lines to the script section either bare top-level statemens or within the onload handler. I use a global variable js_u_num, and top-level function setcolors() for illustration.
[tt]
//inside svg document script section
top.I_js_u_num=js_u_num;
top.I_setcolors=setcolors;
[/tt]
Note: I_ prefix is absolutely arbitrary on my part: you can equally well by putting top.js_u_num=js_u_num etc, as long as your call use the same naming.

[1.2] Then in your html page script, you get the global variable js_u_num and/or call the function setcolors like this.
[tt]
//inside html script section
var n=I_js_num; //free to use n
I_setcolors(); //or even pass parameters if need so
[/tt]
[2] Now the inverse. It is even simpler. There is no need to special setup. Inside the svg document, you can call some global variable, say, x or top-level function f(), say, simply like this.
[tt]
//inside svg document
var m=top.x; //m in svg document, x global html script variable
top.f(); //f() top-level html script function
[/tt]
 
Upvote 0 Downvote
Further notes :
Upon re-read op's posts, I come to realize that js_u_num is meant to be global variable in the html page, whereas my answer above takes js_u_num as some global variable inside the svg document. I should have nothing to revise. It only suffices to understand the context correspondingly, namely, my js_u_num in [1] plays the role of x in [2] (just swap their places) to fall inline with op's notation.
 
Upvote 0 Downvote
Thanks tsuji, that made it work. Excellent!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
791
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
485
Rayj0000
Rayj0000
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
151
chikwendu
chikwendu
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
709
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
499
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top