Question

我正在制作一个基本的编辑系统。为此，我在页面上有一个iFrame，我想要将javascript注入其中。我已经尝试了一些不同的方法并且已经找到了一种方法（注入内联脚本），理想情况下我不想这样做，我想注入一个外部脚本文件。我目前的代码是：

function addScript(src, myscript2) {
    var iFrameHead = window.frames["main_iframe"].document.getElementsByTagName("head")[0];        
    var myscript = document.createElement('script');
    myscript.type = 'text/javascript';
    myscript.src = src;
    iFrameHead.appendChild(myscript);
    iFrameHead.innerHTML = iFrameHead.innerHTML + myscript2;
}
addScript("js/jquery-3.1.1.js", "<scr" + "ipt>function frame_hover(e) {e.preventDefault();console.log('hover enter ', $(e.target));}function frame_drop(e) {e.preventDefault();console.log('drop ', $(e.target));}console.log('iframe loaded and script loaded');</scr" + "ipt>");

这是有效的，jQuery文件正在工作，就像注入的内联脚本一样。

我希望它能像这样工作：

tion injectJS() {
function addScript(src) {
    var iFrameHead = window.frames["main_iframe"].document.getElementsByTagName("head")[0];        
    var myscript = document.createElement('script');
    myscript.type = 'text/javascript';
    myscript.src = src;
    iFrameHead.appendChild(myscript);
}
addScript("js/jquery-3.1.1.js");
addScript("js/frame_script.js");

}

虽然这样做时，我收到错误：Uncaught ReferenceError: frame_hover is not defined at HTMLBodyElement.ondragenter

从：

调用frame_hover

$('#main_iframe').contents().find('body')
                            .attr('ondragenter', 'frame_hover(event)');

frame_script.js的内容是：

function frame_hover(e) {
    e.preventDefault();
    console.log('hover enter ', $(e.target));
}
function frame_drop(e) {
    e.preventDefault();
    console.log('drop ', $(e.target));
}
console.log('iframe loaded and script loaded');

对我来说真正有意义的是，jQuery以这种方式注入它，它的加载方式与加载外部文件frame_script.js的方式完全相同，原因是它没有看到文件？！

将外部JS注入iFrame

0 个答案: