CODEWITHSUNDEEP
javascripthtmlsvg
ee0jmt
ee0jmt

Reputation: 335

Reference the same javascript file in SVG image and HTML Page

I have an html page with an svg image embedded on it.

The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.

The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.

What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.

Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.

Any ideas how I can solve this problem?

Upvotes: 1

Views: 103

Answers (1)

Asons
Asons

Reputation: 87191

May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.

The external script you access like this:

window.parent.toggleButton();

Then the button itself could be your "flag", if it is hidden or not.

I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:

function sendClickToParentDocument(evt)
{
    // SVGElementInstance objects aren't normal DOM nodes, 
    // so fetch the corresponding 'use' element instead
    var target = evt.target;
    if(target.correspondingUseElement)
        target = target.correspondingUseElement;

    // call a method in the parent document if it exists
    if (window.parent.svgElementClicked)
        window.parent.svgElementClicked(target);

}

Src: https://stackoverflow.com/a/10516723/2827823

Upvotes: 1

Related Questions