[英]inject a javascript function into an Iframe
此链接( 存档版本)描述了如何将脚本中的代码注入 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);
}
没关系,但是如果我想将函数对象插入 iframe并让它在 iframe 上下文中执行怎么办? 假设我有:
function foo () {
console.log ("Look at me, executed inside an iframe!", window);
}
我想在 iframe 中插入 foo 的代码? (函数 foo 可能是动态加载的东西,我不能把它用引号括起来)
我天真地尝试:
var scriptFooString = "<script>" + foo.toString() + "</script>"
获取函数内部的代码,但是
scriptFooString
双引号和单引号会发生什么任何提示?
首先,只有当您的框架和显示它的页面在同一个域中时,您才能完成此操作(由于跨域规则)
其次你可以直接通过JS操作框架的dom和window对象:
frames[0].window.foo = function(){
console.log ("Look at me, executed inside an iframe!", window);
}
要从 DOMElement 对象中获取您的框架,您可以使用:
var myFrame = document.getElementById('myFrame');
myFrame.contentWindow.foo = function(){
console.log ("Look at me, executed inside an iframe!");
}
请注意,foo 中的范围没有改变,因此 window 仍然是 foo 中的父窗口等。
如果你想注入一些需要在另一个框架的上下文中运行的代码,你可以注入一个脚本标签,或者对其进行评估:
frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');
虽然普遍的共识是永远不要使用 eval,但我认为如果你真的需要完成这个,我认为它比 DOM 注入更好。
因此,在您的特定情况下,您可以执行以下操作:
frames[0].window.eval(foo.toString());
这是我的解决方案。 我使用 jquery 插入内容,然后使用 eval 在该 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);
});
这段代码是我研究的结果。 接受的答案也对我有很大帮助。 首先,我创建了一个简单的 iframe:
<iframe id="myiframe" width="200" height="200" srcdoc="<h1 id='title'>Hello from Iframe</h1><button type='button' id='fire'>Click Me!</button>
"></iframe>
为了访问 iframe 的窗口和文档,我使用了此代码。
const iframe = document.getElementById('myiframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;
最后我在 iframe 中注入了 js 代码:
var script = iframeDoc.createElement("script");
script.append(`
window.onload = function() {
document.getElementById("fire").addEventListener('click', function() {
const text = document.getElementById('title').innerText;
alert(text);
})
}
`);
iframeDoc.documentElement.appendChild(script);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.