Question

在我的扩展程序中，我使用$.html()复制网页的HTML内容。但是，这样做会丢失一些值，例如<select>元素。为了解决这个问题，我为网页的每个元素提供了一个唯一的ID，然后得到了HTML内容，在那个HTML内容中，我尝试正确设置值。但是，这没有用。以下是代码段：

$( function() 
{ 
    $('*').each( function(i) 
    { 
        $(this).attr('uid', i);
    }); 
});

var html_data = $("html").html();
$("option:selected", html_data).removeAttr("selected");
var all_selected = $("option:selected");
for (var i = 0; i < all_selected.length; i++) 
{
    var uid = $(all_selected[i]).attr("uid");
    $("[uid="+uid+"]", html_data).attr("selected", true)
}

问题是，当我执行“$("option:selected", html_data).removeAttr("selected");”时，它会返回删除了“selected”的元素，但原始的html_data保持不变。似乎html_data是只读的。我还尝试用.removeAttr("selected")中的返回标签替换这些标签。但是，这也不起作用。

有解决方法吗？

更新：从第一个答案开始，似乎有些混乱。让我试着澄清一下：

我无法直接在网页上更改“已选择”值。
我想获取整个网页并将其发送到我的后端控制页面（background.js）。
但是，当我使用.html（）将整个网页发送到后端时，选定的值会丢失。

Answer 1

以下是我解决这个问题的方法。

内容脚本端代码：

//First, generate a unique id for each element                                                                  
$(function() { $('*').each(function(i) { $(this).attr('my_uid', i);}); });

//Once you send the page to the backend, all information such as whether the 
//element is rendered or not is lost. To retain that, add one more attribute to 
//each element                                                          
$(function() {
       $('*').each(function(i) {
         if ($(this).is(":visible")) {
              $(this).attr('final_rendering', "visible");
         }
         else {
              $(this).attr('final_rendering', "hidden");
         }
  });
});

//Collect all values that are lost in an object                  
var my_vals = {};
var input_elements = $(":input[type='text'], select");

for (var i = 0; i < input_elements.length; i++) {
     var uid = $(input_elements[i]).attr("my_uid");
     var val = $('[my_uid='+ uid +']').val();
     my_vals[uid] = val;
}

var html_page = $("html").html();
send_response({
    'html_page' : html_page,
    'my_vals'  :  my_vals
});

后台脚本代码：

function get_html_page_cb(ret_val) {

   var html_page = ret_val['html_page'];
   var my_vals = ret_val['my_vals'];
   var html_doc_copy = document.implementation.createHTMLDocument("webpage");
   html_doc_copy.documentElement.innerHTML = html_page;

   for (var id in my_vals) {
      $("[my_uid="+id+"]",html_doc_copy).val(my_vals[id]);
   }
}

如果有人有更好的主意，我会全力以赴。

如何修改html字符串中的值？

1 个答案: