简体   繁体   English

修改的innerHTML不在页面上显示

[英]modified innerHTML does not show on page

I am writing a Google extension. 我正在写一个Google扩展程序。 Here my content script modifies a page based on a list of keywords requested from background. 在这里,我的内容脚本根据从后台请求的关键字列表来修改页面。 But the new innerHTML does not show up on the screen. 但是新的innerHTML不会显示在屏幕上。 I've kluged it with an alert so I can see the keywords before deciding to actually send a message, but it is not how the routine should work. 我将其与警报合并在一起,以便在决定实际发送消息之前可以看到关键字,但这不是例程应如何工作的。 Here's the code: 这是代码:

// MESSAGE.JS //
//alert("Message Page");

var keyWordList= new Array();
var firstMessage="Hello!";
var contentMessage=document.getElementById("message");
contentMessage.value=firstMessage;
var msgComments=document.getElementsByClassName("comment");
msgComments[1].value="Hello Worlds!";//marker to see what happens

chrome.extension.sendRequest({cmd: "sendKeyWords"}, function(response) {
    keyWordList=response.keyWordsFound;
    //alert(keyWordList.length+" key words.");//did we get any keywords back?
    var keyWords="";
    for (var i = 0; i<keyWordList.length; ++i)
    {
        keyWords=keyWords+" "+keyWordList[i];
    }
    //alert (keyWords);//let's see what we got
    document.getElementsByClassName("comment")[1].firstChild.innerHTML=keyWords;
    alert (document.getElementsByClassName("comment")[1].firstChild.innerHTML);// this is a band aid - keyWords does not show up in tab
});

document.onclick= function(event) {
   //only one button to click in page
    document.onload=self.close();
};

What do I have to do so that the text area that is modified actually appears in the tab? 我必须怎么做才能使修改后的文本区域实际出现在选项卡中?

(Answering my own question) This problem really has two parts. (回答我自己的问题)这个问题实际上有两个部分。 The simplest part is that I was trying to modify a text node by setting its value like this: 最简单的部分是我试图通过设置文本节点的值来修改它,如下所示:

msgComments 1 .value="Hello Worlds!"; msgComments 1 .value =“ Hello Worlds!”; //marker to see what happens //标记以查看会发生什么

To make it work, simply set the innerHTML to a string value like this: 要使其工作,只需将innerHTML设置为这样的字符串值:

msgComment1.innerHTML="Hello Worlds!"; msgComment1.innerHTML =“ Hello Worlds!”; //now it works. //现在可以使用了。

The second part of the problem is that the asynchronous call to chrome.extension.sendRequest requires a callback to update the innerHTML when the reply is received. 问题的第二部分是,对chrome.extension.sendRequest的异步调用在收到回复时需要回调以更新innerHTML。 I posted a question in this regard earlier and have answered it myself after finding a solution in an previous post by @serg. 先前在这方面发布了一个问题,并且在@serg的上一篇文章中找到解决方案后,自己回答了这个问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM