如何从由<object>引用的svg调用父文档中定义的函数元素

How to call functions defined in parent document from an svg referenced by an <object> element?

本文关键字：文档 调用 元素 函数 定义 svg 引用 object      更新时间：2023-09-26

我曾经在我的网页中嵌入一个svg文件:

    <object id="svgmap" width="100%" height="100%" data="<%=path %>/svg/map.svg" type="image/svg+xml" style="">
    </object>

，然后我添加了一些图像标签到这个svg文件使用一个外部javascript文件称为"support.js":

    var marker = document.createElementNS(xmlns, 'image');
    marker.setAttributeNS(null, 'id', "img_0123");
    marker.setAttributeNS('http://www.w3.org/1999/xlink', 'href', iconurl);
    marker.setAttributeNS(null, 'x', posX);
    marker.setAttributeNS(null, 'y', posY);
    marker.setAttributeNS(null, 'visibility', 'visible');
    marker.setAttribute("onclick", "onsel('0123')");

这个"onsel"函数也是在support.js中定义的，所以当我单击图像时，它会变成另一个图像。现在，当我在浏览器(Opera, Mozilla和Chrome)中查看此页面时，当我点击图像时，它没有切换到另一个图像，并且在开发人员工具的控制台上，它说"referenceerror: onsel is not defined svgmap:1"。

这是否意味着svg文件不能使用其他javascript文件中定义的函数?怎么做呢?

我将您的问题解释为"如何从元素引用的svg调用父html文档范围内定义的函数?"。从你的"onsel"函数定义的问题中有点不清楚，但我猜它是在html文档中的脚本中。

下面是一个如何从svg内部调用父元素的示例。父元素中的函数输出被点击的元素以及它是从哪个元素引用的。

从svg到父文档:

    window.parent.yourFunctionInParentDocument();
相关文章：