程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了将 javascript 注入 iframe大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决将 javascript 注入 iframe?

开发过程中遇到将 javascript 注入 iframe的问题如何解决?下面主要结合日常开发的经验,给出你关于将 javascript 注入 iframe的解决方法建议,希望对你解决将 javascript 注入 iframe有所启发或帮助;

我正在处理一个页面,其中包含一个包含表单的 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 按钮并按键盘上的 spaceentersubmit 事件是您可以在提交前验证表单并在出现问题时防止它发生的最终目的地。当然,您必须为表单分配一些 id 或任何其他属性才能向其添加事件侦听器。

,

实际上我最终采取了不同的方法。

意识到我可以从 iFrame 中引用 parent.function() 而不是将脚本注入 iFrame。

这解决了无法访问变量和调用函数的范围的问题。

大佬总结

以上是大佬教程为你收集整理的将 javascript 注入 iframe全部内容,希望文章能够帮你解决将 javascript 注入 iframe所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。