向iframe写入inline JavaScript后函数无法找到的问题咨询

问题成因 #

• 浏览器原生安全规则限制：通过innerHTML接口插入的<script>标签不会被执行，你写入iframe的hello函数定义代码从未实际运行，自然不存在该函数。
• 执行上下文隔离：iframe和父页面是完全独立的JavaScript执行上下文，点击iframe内的链接时，onclick事件默认会在iframe的window对象下查找hello函数，而父页面也没有定义该函数，因此触发未定义错误。

解决方案 #

可以选择以下任意一种方案实现，都不需要引入外部JS文件，也不需要把逻辑写在行内事件中：

方案1：使用iframe文档的write方法写入内容 #

document.write写入的内容会被浏览器正常解析，内部的<script>标签会自动执行，改写后的代码如下：

function write_to_iframe(){ 
    let myframe = document.getElementById("myframe");
    let nw = document.getElementById("mysrc");
    const frameDoc = myframe.contentWindow.document;
    // 打开文档流写入内容，关闭后自动完成解析执行
    frameDoc.open();
    frameDoc.write(nw.innerHTML);
    frameDoc.close();
}

方案2：手动提取并插入script标签 #

如果你不想用document.write，可以先写入普通DOM内容，再手动把原div中的脚本复制到iframe内手动插入，手动创建插入的<script>标签会被正常执行：

function write_to_iframe(){ 
    let myframe = document.getElementById("myframe");
    let nw = document.getElementById("mysrc");
    const frameDoc = myframe.contentWindow.document;
    // 先写入非脚本的DOM内容
    frameDoc.body.innerHTML = nw.innerHTML;
    // 单独处理所有脚本标签
    const originScripts = nw.querySelectorAll('script');
    originScripts.forEach(oldScript => {
        const newScript = frameDoc.createElement('script');
        newScript.textContent = oldScript.textContent;
        frameDoc.body.appendChild(newScript);
    })
}

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