tiêm một hàm javascript vào Iframe

Question

This link (archived version) mô tả cách tiêm mã từ một kịch bản vào iframe:

function injectJS() { 
    var iFrameHead = window.frames["myiframe"].document.getElementsByTagName("head")[0]; 
    var myscript = document.createElement('script'); 
    myscript.type = 'text/javascript'; 
    myscript.src = 'myscript.js'; // replace this with your SCRIPT 
    iFrameHead.appendChild(myscript); 
} 

Đó là ok, nhưng những gì nếu tôi muốn chèn một đối tượng hàm vào iframe và làm cho nó được thực thi trong ngữ cảnh iframe? Giả sử tôi có:

function foo() { 
    console.log ("Look at me, executed inside an iframe!", window); 
} 

và tôi muốn chèn mã của foo vào khung nội tuyến? (chức năng foo có thể được một cái gì đó nạp tự động, tôi không thể chỉ quấn nó trong dấu ngoặc kép)

Tôi ngây thơ thử:

var scriptFooString = "<script>" + foo.toString() + "</script>"

để lấy mã bên trong hàm, nhưng

• Tôi không biết cách chèn nó vào HEAD khung nội tuyến (có thể với jquery?)
• Tôi không biết đó có phải là cách thích hợp không
• Tôi không biết những gì sẽ xảy ra khi nếu chức năng là phức tạp hơn cách mà
• Tôi không biết điều gì xảy ra với dấu ngoặc kép và duy nhất trong scriptFooString

Bất kỳ gợi ý?

Answer 1

Trước hết bạn chỉ có thể thực hiện điều này nếu khung hình của bạn và trang web hiển thị nó nằm trong cùng một tên miền (Do quy tắc cross-domain)

thứ hai bạn có thể thao tác dom và cửa sổ đối tượng của khung trực tiếp thông qua JS:

frames[0].window.foo = function(){ 
    console.log ("Look at me, executed inside an iframe!", window); 
} 

để có được khung của bạn từ một DOMElement đối tượng bạn có thể sử dụng:

var myFrame = document.getElementById('myFrame'); 

myFrame.contentWindow.foo = function(){ 
     console.log ("Look at me, executed inside an iframe!"); 
} 

Lưu ý rằng phạm vi trong foo là không thay đổi, vì vậy cửa sổ vẫn là cửa sổ cha, vv bên trong foo.

Nếu bạn muốn tiêm một số mã mà cần phải được chạy trong bối cảnh của khung khác bạn có thể tiêm một thẻ script, hoặc eval nó:

frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }'); 

Mặc dù sự đồng thuận chung là không bao giờ sử dụng eval , Tôi nghĩ rằng nó là một thay thế tốt hơn so với tiêm DOM nếu bạn thực sự cần phải thực hiện điều này.

Vì vậy, trong trường hợp cụ thể của bạn, bạn có thể làm điều gì đó như:

frames[0].window.eval(foo.toString()); 

Answer 2

Đây là giải pháp của tôi. Tôi đang sử dụng jquery để chèn nội dung, sau đó sử dụng eval để thực thi các thẻ tập lệnh trong ngữ cảnh của iframe đó:

var content = $($.parseHTML(source, document, true)); 
    $("#content").contents().find("html").html(content); 
    var cw = document.getElementById("content").contentWindow; 
    [].forEach.call(cw.document.querySelectorAll("script"), function (el, idx) { 
     cw.eval(el.textContent); 
    });