javascript - 在 SVG 图像和 HTML 页面中引用相同的 javascript 文件

Question

我有一个 html 页面，上面嵌入了 svg 图像。

SVG 图像位于单独的文件中。 SVG 图像引用了一个执行一些图像定位功能的 JavaScript 文件。

HTML 页面引用相同的 javascript 文件，并具有用于放大图像以及重置图像缩放和位置的控件，此功能在 javascript 文件中实现。

我想要做的是当图像重新定位时设置一个标志，以便我知道何时在 html 页面上显示和隐藏重置图像按钮。

因为我已经引用了这个 javascript 文件两次，所以我运行了 2 个单独的版本，因此 svg 引用设置的标志与 html 引用读取的标志不同。问题是图片定位是由svg图片发起的，缩放是由html页面发起的。

有什么想法可以解决这个问题吗？

Answer 1

我建议您执行以下操作，通过调用html页面脚本让SVG内的脚本隐藏/显示按钮。

您访问的外部脚本如下:

window.parent.toggleButton();

那么按钮本身就可以成为您的“标志”，无论它是否隐藏。

我还发现了此代码，它存在于 SVG 文件中，您可以在其中将对 SVG 的单击元素的引用传递到 html 页面:

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);

}

来源:https://stackoverflow.com/a/10516723/2827823