点击SVG无法触发父页面load_AnimalChosen函数，如何修正？

这个问题是因为现代浏览器的安全策略收紧，加上旧代码的一些细节问题导致的。我给你两种解决方案，从修复原有逻辑到更现代可靠的实现：

方案1：修复直接函数调用（适合同源场景） #

如果你的SVG文件和父页面在同一域名、协议、端口下（包括本地用localhost服务打开，不要直接用file://协议），可以通过以下调整恢复功能：

调整父页面代码 #

确保函数挂载到全局window对象上，让iframe能正常访问：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Set height of body and the document to 100% */
body, html { height: 100%; margin: 0; font-family: Arial; overflow:hidden; }
iframe { height: 48%; padding: 2px 2px; }
</style>
<script>
// 明确将函数挂载到window全局对象，确保iframe能访问到
window.load_AnimalChosen = function(xxxx) {
    alert("in AnimalChosen");
    var s = document.getElementById("animal");
    // 根据参数显示对应动物
    s.textContent = xxxx === 1 ? "CAT" : "DOG";
}
</script>
</head>
<body>
<iframe id="iFrame_5" src="animals.svg" width="100%" ></iframe>
<p>the animal is a ...</p>
<p id="animal">????</p>
</body>
</html>

调整SVG代码 #

增加安全检查，避免因父页面函数不可访问而报错：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width = "100%" height = "100%" viewBox="0 0 540 328" >
<script><![CDATA[
function loadAnimal(xxxx){
    var chosen_value = xxxx;
    alert("chosen_value " + chosen_value);
    // 先检查父窗口和目标函数是否存在
    if (window.parent && typeof window.parent.load_AnimalChosen === 'function') {
        window.parent.load_AnimalChosen(chosen_value);
    } else {
        alert("无法访问父页面函数，请检查同源设置或代码");
    }
}
]]></script>
<text x="175" y="52" font-size="28" fill="blue" font-style="italic" font-weight="bold" text-anchor="middle" onclick="loadAnimal(1)" >CAT</text>
<text x="175" y="152" font-size="28" fill="blue" font-style="italic" font-weight="bold" text-anchor="middle" onclick="loadAnimal(2)" >DOG</text>
</svg>

方案2：使用postMessage通信（更推荐） #

postMessage是W3C标准的跨上下文通信方式，不受直接函数调用的限制，安全性和兼容性更好，即使未来浏览器策略变化也更稳定：

父页面代码（监听消息） #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html { height: 100%; margin: 0; font-family: Arial; overflow:hidden; }
iframe { height: 48%; padding: 2px 2px; }
</style>
<script>
window.addEventListener('message', function(event) {
    // 验证消息来源，只处理可信的同源消息（生产环境请替换为具体域名）
    if (event.origin !== window.location.origin) {
        return;
    }
    // 处理动物选择的消息
    if (event.data.type === 'animalChosen') {
        alert("in AnimalChosen");
        var s = document.getElementById("animal");
        s.textContent = event.data.value === 1 ? "CAT" : "DOG";
    }
});
</script>
</head>
<body>
<iframe id="iFrame_5" src="animals.svg" width="100%" ></iframe>
<p>the animal is a ...</p>
<p id="animal">????</p>
</body>
</html>

SVG代码（发送消息） #

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width = "100%" height = "100%" viewBox="0 0 540 328" >
<script><![CDATA[
function loadAnimal(xxxx){
    var chosen_value = xxxx;
    alert("chosen_value " + chosen_value);
    // 向父页面发送消息，指定目标同源地址
    window.parent.postMessage({
        type: 'animalChosen',
        value: chosen_value
    }, window.location.origin);
}
]]></script>
<text x="175" y="52" font-size="28" fill="blue" font-style="italic" font-weight="bold" text-anchor="middle" onclick="loadAnimal(1)" >CAT</text>
<text x="175" y="152" font-size="28" fill="blue" font-style="italic" font-weight="bold" text-anchor="middle" onclick="loadAnimal(2)" >DOG</text>
</svg>

为什么旧代码失效？ #

• 同源策略收紧：现代浏览器严格执行同源规则，直接访问window.parent的函数必须满足同源条件；如果是本地直接打开file://协议的文件，不同浏览器的处理逻辑不同，大概率会被阻止。
• 函数作用域问题：旧代码中父页面的函数没有明确挂载到window，在严格模式下可能无法被iframe访问。
• 浏览器安全更新：近年来各浏览器都加强了跨帧脚本访问的限制，直接调用父页面函数的方式不再像IE/旧版Firefox那样宽松。

内容的提问来源于stack exchange，提问作者dan