大佬教程收集整理的这篇文章主要介绍了将 javascript 注入 iframe,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我无权修改“源”,但可以通过 Google 跟踪代码管理器注入代码。
我可以使用以下方法轻松填充其中一个表单字段:
var iframe = document.getElementByID('my_iframe');
var iframedocument = iframe.contentdocument || iframe.contentwindow.document;
var amounTinput = iframedocument.getElementByID("transaction_amount");
amounTinput.setAttribute("value","100");
但是,我也想更改表单提交按钮的 onclick
方法,但是遇到了一些问题。最初我尝试过这样的事情:
function valIDate_form() {
if (amounTinput > 100) {
alert("No chance!");
return false;
}
return true;
}
iframedocument.getElementByID("submiT_Button").setAttribute("onclick","return valIDate_form();");
我认为这些问题是由于从主页调用了我的“注入”,但从 iframe 中调用了注入ED 代码。第一个问题是提交按钮找不到功能...
为了解决我尝试过的问题:
frames["my_iframe"].window.valIDate_form = function() {
if (amounTinput > 100) {
alert("No chance!");
return false;
}
return true;
}
iframedocument.getElementByID("submiT_Button").setAttribute("onclick","return valIDate_form();");
现在它触发,但无法访问 amounTinput
... 再次怀疑是因为它是在主页范围内定义的,而不是在 iframe 内。
然后我通过将原始注入脚本调整为以下内容来解决此问题:
var iframe = document.getElementByID('my_iframe');
var iframedocument = iframe.contentdocument || iframe.contentwindow.document;
var amounTinput = iframedocument.getElementByID("transaction_amount");
amounTinput.setAttribute("value","100");
frames["giftCard_iframe"].window.amounTinput = amounTinput;
但所有这些似乎都非常混乱且难以理解。有没有更简单/更标准的方法?
您可以使用注入 iframe 脚本来执行相同的操作:
var iframe = document.getElementById('my_iframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var scriptsource = `
window.addEventListener('DOMContentLoaded',function() {
var form = document.getElementById('form'); // change to the actual form SELEctor
var input = document.getElementById('transaction_amount');
input.value = 100;
form.addEventListener('submit',function (ev) {
if (number(input.value) > 100) {
alert('No chance');
ev.preventDefault();
}
});
});
`;
var script = iframeDocument.createElement("script");
var source = iframeDocument.createTextNode(scriptsourcE);
script.appendChild(sourcE);
iframeDocument.body.appendChild(script);
我添加了等待 DOMContentLoaded
事件,但如果您确定在您准备注入此脚本时 iframe 的 DOM 已准备好,您可以省略 addEventListener('DOMContentLoaded',...)
包装。
此外,我还使用表单的 onclick
事件侦听器更改了 submit
内联属性。虽然您可以通过多种方式提交表单:在表单的某个字段中点击 enter
,标签导航到 submit
按钮并按键盘上的 space
或 enter
。 submit
事件是您可以在提交前验证表单并在出现问题时防止它发生的最终目的地。当然,您必须为表单分配一些 id
或任何其他属性才能向其添加事件侦听器。
实际上我最终采取了不同的方法。
意识到我可以从 iFrame 中引用 parent.function() 而不是将脚本注入 iFrame。
这解决了无法访问变量和调用函数的范围的问题。
以上是大佬教程为你收集整理的将 javascript 注入 iframe全部内容,希望文章能够帮你解决将 javascript 注入 iframe所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。