javascript - 制作脚本书签

Question

我正在尝试制作脚本书签，将表单自动填充到网站中，我基于谷歌搜索制作的脚本在经过一些修改后可以工作，但它只能在控制台中工作。

$($0 || 'body').find('input, textarea, select').filter(':visible').each(function(){

if( $(this).attr('id')==='email' || $(this).attr('name')==='email' )
    return $(this).val('some@email.com');

if( $(this).attr('id')==='phone' || $(this).attr('name')==='phone' )
    return $(this).val('PHONE NUMBER');

if( $(this).attr('id')==='juridiction' || $(this).attr('name')==='juridiction' )
    return $(this).val('JURIDICTION');            });

有人可以向我解释一下应该这样做吗？

Answer 1

您可以使用 JavaScript 中的 encodeURIComponent 函数来正确编码任何函数。也有一些网站可以做到这一点。要制作小书签，您只需在编码脚本前面添加 javascript: 即可。

简单的例子:

1. 您的函数:alert('hello!');
2. ...编码alert('hello!')%3B
3. ...现在是 URL:javascript:alert('hello!')%3B

(请注意，步骤 2 是通过在浏览器控制台中运行 encodeURIComponent("alert('hello!');") 生成的。)

亲自尝试一下，将最后一步直接粘贴到浏览器的地址栏中。 (您可能需要重新输入 javascript:，当您执行粘贴时，浏览器似乎会将其删除，可能是作为一种安全措施。)

如果您按照所提供的代码片段执行完全相同的步骤，您应该得到以下结果:

javascript:%24(%240%20%7C%7C%20'body').find('input%2C%20textarea%2C%20select').filter('%3Avisible').each(function()%7B%0A%0Aif(%20%24(this).attr('id')%3D%3D%3D'email'%20%7C%7C%20%24(this).attr('name')%3D%3D%3D'email'%20)%0A%20%20%20%20return%20%24(this).val('some%40email.com')%3B%0A%0Aif(%20%24(this).attr('id')%3D%3D%3D'phone'%20%7C%7C%20%24(this).attr('name')%3D%3D%3D'phone'%20)%0A%20%20%20%20return%20%24(this).val('PHONE%20NUMBER')%3B%0A%0Aif(%20%24(this).attr('id')%3D%3D%3D'juridiction'%20%7C%7C%20%24(this).attr('name')%3D%3D%3D'juridiction'%20)%0A%20%20%20%20return%20%24(this).val('JURIDICTION')%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B

您现在可以创建新书签并粘贴到该 URL 中。瞧!一个小书签。任何错误都会记录在您的浏览器控制台中。

编辑

额外提示:要在控制台中轻松编码多行函数，请使用一个相对较新的功能(自 ES6 起)，称为 template strings 。示例:

encodeURIComponent(`
  alert('Line 1!');
  alert('Line 2!');
`);

这对于您的典型报价是不可能的。