个人中心
gpt4 book ai didi

javascript - 除非新值是严格的数字，否则不能设置 DOM 元素的值

转载 作者：行者123 更新时间：2023-11-28 01:10:09 24 4
gpt4 key购买 nike

免责声明:浏览器扩展和 javascript 的初学者。

背景:我正在尝试开发一个 概念验证 Chrome 扩展程序，它从加载到一个选项卡中的网页的 HTML 形式的输入字段中获取文本，并在类似的页面上输入相同的文本另一个选项卡中的页面字段。

在我的特定示例中，源 页面是一个最小的本地 HTML 文件，具有两个输入字段(“用户名”和“密码”)，目标是 Apple 开发者网站的登录页面 ( https://developer.apple.com/account/ )。

阅读此处的官方指南和问题，我整理了一些似乎有效的代码。

问题:只有由数字组成的文本(例如:“111111”)才会从一个选项卡复制到另一个选项卡。只要我的输入字段包含字母(例如:“111111a”)，就不会发生任何事情。

这是源码页面(本地file:///):

<html>
  <head>
    <title>Source Page</title>
    <meta charset="utf-8" />
    <script src="popup.js"></script>
  </head>
  <body>
    <form>
      <input id="accountname_src" name="appleId" placeholder="Apple ID" /><br />
      <input id="accountpassword_src" name="password" placeholder="Password" />
    </form>
  </body>
</html>

目标 HTML(Apple 的页面)具有类似的输入字段，其元素 ID 分别为 accountname 和 accountpassword。

我的扩展脚本如下:

document.addEventListener('DOMContentLoaded', function(){
    // The button in the browser action popup:
    var button = document.getElementById('autofill');

    var sourceTabID = null;
    var destTabID = null;

    // Get the SOURCE tab id:
    chrome.tabs.query({'title': 'Source Page'}, function(tabArray){
        sourceTabID = tabArray[0].id;
    });

    // Get the DESTINATION tab id:
    chrome.tabs.query({'title': 'Sign in with your Apple ID - Apple Developer'}, function(tabArray){
        destTabID = tabArray[0].id;
    });

    if (button !== null){
        button.addEventListener('click', function(){

            // Get entered text from Source page:
            chrome.tabs.executeScript(sourceTabID, {file: "read_input.js"}, function(results){

                var credentials = results[0];
                var userName = String(credentials[0]); 
                var password = String(credentials[1]);

                // Pass values to Apple login page:
                var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
                var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"
                var autofillCode = insertUserNameCode + insertPasswordCode;

                chrome.tabs.executeScript(destTabID, {code:autofillCode});
            });

            //window.close();
        });
    }
});

当然，read_input.js的内容是:

var userName = document.getElementById("accountname_src").value;
var password = document.getElementById("accountpassword_src").value;

var attributes = [userName, password]; 

attributes  // (Final expression, passed to callback of executeScript() as 'results')

感觉好像某处可能存在类型推断问题，但又说不出来。

奖励问题:

我可以使用外部脚本(上面的 read_input.js)和 chrome.tabs.executeScript(. .., file:...; 但是当我尝试使用类似的方法将值写入到目标选项卡时，脚本不会运行(这就是我使用的原因chrome.tabs.executeScript(..., code:... 在我的代码中)。知道会发生什么吗？

最佳答案

愚蠢的我 (再次)...一些console.log引导我走向正确的方向...

我没有转义脚本中的值；这些行:

var insertUserNameCode = "document.getElementById('accountname').value = " + userName + ";"
var insertPasswordCode = "document.getElementById('accountpassword').value = " + password + ";"

...应该是:

var insertUserNameCode = "document.getElementById('accountname').value = '" + userName + "';"
var insertPasswordCode = "document.getElementById('accountpassword').value = '" + password + "';"

(在值周围添加了单刻度线)

...因此代码最终为:

document.getElementById('accountname').value = '111111a';

...而不是:

document.getElementById('accountname').value = 111111a;

不过，仍然不确定为什么只有数字的值有效。

关于javascript - 除非新值是严格的数字，否则不能设置 DOM 元素的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38046651/

24 4 0
文章推荐： javascript - 如何在新标签加载时使用 HTML DOM 事件？
文章推荐： c++ - 删除当前对象并创建一个新对象数组
文章推荐： javascript - 脚本438 : Object doesn't support property or method 'buttonset'
文章推荐： reactjs - 为什么位置固定减少了 react 的宽度？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com