未捕获的TypeError:e不是小书签的JS函数上的函数

时间:2019-01-09 18:26:03

标签: javascript bookmarklet

我是JS和书签的新手。

我正在修改一些现有代码;是这样写的(出于教学目的,我将实际代码简化了):

  javascript: 1 && function(e) {
    var t = "";
    t += "<style>",
    t += ".somestyle-header{ background-color: #0171C5 !important }",
    t += "</style>",
    t += '<div class="somestyle-header">Test</div>',
    t += "";
    e("body").append("<div id='something'> </div>"), e("#something").append(t)
  }($myvariable);

现在,这当前有效,它会创建一个名为 “ something” DIV ,然后将所有内容附加到变量“ t” 。换句话说,它将变量“ t” 上的内容添加到当前网站的HTML中(假设该网站设置了 $ myvariable 某处)。

我正在尝试做类似的事情,但是我有以下问题:

  1. 如何在功能开始时删除该 1 并使其起作用?
  2. 如何使它在每个页面上都能正常工作? 到底是否存在 $ myvariable

此外,如果有人可以一开始就解释1并在末尾解释$ myvariable在做什么,以及如果我删除其中任何一部分,为什么此代码不起作用?

我希望我可以做这样的事情:

javascript: (function() {

  if (!($ = window.jQuery)) {
      script = document.createElement( 'script' );
      script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
      script.onload=launchTheSplash;
      document.body.appendChild(script);
  } 
  else {
      launchTheSplash(e);
  }

  function launchTheSplash(e) {
    var t = "";
    t += "<style>",
    t += ".somestyle-header{ background-color: #0171C5 !important }",
    t += "</style>",
    t += '<div class="somestyle-header">Test</div>',
    t += "";
    e("body").append("<div id='something'> </div>"), e("#something").append(t)
  }
}());

因此:

  1. 我检查是否存在JQuery
  2. 无论$ myvariable是否存在,我都会启动我的小书签

但是,如果我删除开头的1或结尾的$ myvariable,我的代码似乎根本不起作用。如果这样做,我会收到 Uncaught TypeError:e不是函数

希望这很清楚。预先感谢!

编辑:

我尝试了以下建议:

javascript: (function() {

  if (!($ = window.jQuery)) {
      script = document.createElement( 'script' );
      script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'; 
      script.onload=launchTheSplash();
      document.body.appendChild(script);
  } 
  else {
      launchTheSplash();
  }

  function launchTheSplash(e = $) {
      var t = "";
      t += "<style>",
      t += ".somestyle-header{ background-color: #011515 !important }",
      t += "</style>",
      t += '<div class="somestyle-header">Test</div>',
      t += "";
      e("body").append("<div id='something'> </div>"), e("#something").append(t);
    }
}());

但是它在某些页面上似乎无效;例如-如果我尝试在www.apple.com网站上运行小书签,它会返回未捕获的TypeError:e不是函数

任何想法表示赞赏!再次感谢!

1 个答案:

答案 0 :(得分:1)

为了立即执行功能,可以使用IIFE(https://developer.mozilla.org/en-US/docs/Glossary/IIFE)。立即执行功能的正确语法是-

(function(text){
  console.log(text);
})('Hello World')

在您的情况下,e应该是jquery元素,因此,每当调用启动函数时,都应在其中传递$

看看这个片段-https://jsitor.com/E8JW18YD-