javascript - 执行书签 javascript 时遇到困难

Question

我正在尝试创建一个小书签应用程序，该应用程序可以解析来自 Amazon、Etsy 和 JCrew 的信息，并将其传输到 Rails 中内置的愿望 list 应用程序。我已经成功创建了一个书签按钮，将我的 javascript 文件加载到 DOM 中，但它似乎没有正确执行并将数据传递到我的应用程序。或者我的 javascript 有问题。谁能帮我弄清楚我做错了什么？我在下面包含了我的 js 文件:

function() {

function get_amazon_product_info() 
    {
        var title_span = document.getElementById("btAsinTitle");
        var title = title_span.innerText;

        var image_tag = document.getElementById("main-image");
        var image = image_tag.getAttribute("src");

        var price_span = document.getElementById("actualPriceValue");
        var price = price_span.innerText;

        var product_info = {
            title: title,
            image: image,
            price: price
        }
        return product_info
    }

function get_etsy_product_info()
{
        var title_span = document.getElementById("item-title");
        var title = title_span.innerText;

        var image_div = document.getElementById("fullimage_link1");
        var image_tag = image_div.getElementsByTagName("img");
        var image = image_tag[0].getAttribute("src");

        var price_div = document.getElementsByClassName("item-price");
        var price_span = price_div[0].getElementsByClassName("currency-value")
        var price = price_span[0].innerText;

        var product_info = {
            title: title,
            image: image,
            price: price
        }
        return product_info
}

function get_jcrew_product_info()
{
    var title_span = document.getElementById("pdp-title");
        var title = title_span.innerText;

        var image_div = document.getElementsByClassName("prod_main_img");
        var image_tag = image_div[0].getElementsByTagName("img");
        var image = image_tag[0].getAttribute("src");

        //lame implementation -- need to be able to determine which radio button is checked. Finish later!

        var price_div = document.getElementsByClassName("pdp-shapes");
        var price_span = price_div[0].getElementsByClassName("price")
        var price = price_span[0].innerText;

        var product_info = {
            title: title,
            image: image,
            price: price
        }
        return product_info
}

function determine_params() 
{
        domain = document.domain;
        if (domain == 'www.amazon.com')
        {   
            get_amazon_product_info();
        }
        else if (domain == 'www.etsy.com')
        {
            get_etsy_product_info();
        }
        else if (domain == 'www.jcrew.com')
        {
            get_jcrew_product_info();
        }
}   

function send_data(product_info)
{           
    var link_url = document.URL;
    var http = new XMLHttpRequest();
    var url = "http://max-miller.local:3000/add_product";
    var params = "title=" + product_info[title] + "&image=" + product_info[image] + "&price=" + product_info[price] + "&link_url=" + link_url;
    http.open("POST", url , true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }

    http.send(params);
}

determine_params();
send_data(product_info);

}

Answer 1

正如我的评论中所指出的，我发现您的代码存在两个问题按原样。

首先，你的闭包永远不会被执行 - 它实际上在语法上是不正确的。在浏览器的控制台中，此示例之间的区别是:

function() { console.log('something'); }

还有这个:

(function() { console.log('something'); })();

第二，XMLHttpRequest 只能在页面域的上下文中工作。 (该脚本不会获得其来源域的特殊权限。)因此，考虑到脚本的性质，max-miller.local:3000 看起来不是 预期的执行域，请求将失败。

查看JSONP类似的解决方案。