为什么我丢失了全局变量的值? FIXED

时间:2018-02-14 00:34:57

标签: javascript google-chrome-extension

我想将用户选择的文本保存在Chrome扩展程序的变量中。为此,我使用document.getSelection()方法。

我有全局变量“theText”。当我选择一些文本时,在第一个和第二个日志中,我有我选择的文本。没关系。但是在第三个日志中,我丢失了变量的值。为什么?我在JavaScript中阅读了很多关于范围的内容,但我认为我的变量是全局的,所以我不明白为什么我失去了我的价值。

“definitionPopup”是HTML中我的工具栏的ID。

你能帮帮我吗?我在这里诺比

谢谢!

这是我的js文件:

var theText;
window.addEventListener('mouseup', function(){
    var text = getSelectionText()
    console.log(text.length);
    if (text.length > 0){ // check there's some text selected
        theText = text;
        console.log("Second log theText " + theText);
    }
}, false);

function getSelectionText(){
    var selectedText = "";
    if (document.getSelection()){
        selectedText = document.getSelection().toString();
        if(selectedText.length > 0){
            theText = selectedText;
            console.log("First test theText " + theText);
        }
    }
    return selectedText;
}

$(document).ready(function(){

  //Call deninion service
  $("#definitionPopup").click(function(e){
    console.log('Third test theText '+ theText);
    ...
  });

我的toolbar.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/services/option-selected.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <div id="toolbar">
      <ul class="nav navbar-nav">
        <li id="searchTextPopup"><input type="text" name="search" placeholder="Buscar..."></li>
        <li id="definitionPopup"><a href="#">Definiciones</a></li>
        <li id="synonymPopup"><a href="#">Palabras parecidas</a></li>
        <li id="antonymPopup"><a href="#">Palabras distintas</a></li>
        <li id="imgPopup"><a href="#">Pictogramas</a></li>
        <li id="youtubePopup" ><a href="#" >Youtube</a></li>
      </ul>
    </div>

  </body>
</html>

add-toolbar.js我创建了我的iframe

var height = '60px';
//var iframe = document.createElement('iframe'); //the "error" is here.
//I create div instead of iframe
var iframe = document.body.createElement('div');
iframe.setAttribute("id", "customToolbarMenu");

//iframe.src = chrome.extension.getURL('../toolbar.html'); //change this
//for this
$("#customToolbarMenu").load(chrome.extension.getURL('../toolbar.html')); 

document.documentElement.appendChild(iframe);


var bodyStyle = document.body.style;
var cssTransform = 'transform' in bodyStyle ? 'transform' : 'webkitTransform';
bodyStyle[cssTransform] = 'translateY(' + height + ')';

0 个答案:

没有答案