Question

我正在尝试为chrome扩展编写一些JS代码，以便在页面加载时自动选择一个选项。到目前为止，我还没有弄明白。这就是我所拥有的 -

document.getElementByValue("9.0").selected=true;

我尝试做的是让它选择该选项，然后使用 -

单击提交按钮

document.getElementByClass('active_step').click();

这是我测试的页面 - 测试页

好的我觉得我越来越近了，我使用下面的代码 -

function SubmitIt(){
$("input[name='pdp_addtocart']").click();
}

function SelectIt(){
document.getElementById("product_sizes").selectedIndex = 3;
}

SelectIt();
SubmitIt();

选择选项会突出显示，但实际上并没有被点击，因为页面告诉我先选择一个选项，我假设我的代码尝试点击提交。所以现在我需要弄清楚如何实际点击突出显示的选项。

Answer 1

在对您的测试页进行一些讨论之后，事实证明除了为product_sizes <select>元素设置所选值之外，还有更多事情发生在背景中。还有一个隐藏 <input>元素，它保存实际选定的值，因此它的值也必须设置（参见下面的代码）：

<强>的manifest.json：

{
    "manifest_version": 2,

    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": false,

    "content_scripts": [{
        "matches":    ["*://www.example.com/*"],
        "js":         ["content.js"],
        "run_at":     "document_end",
        "all_frames": false
    }]
}

<强> content.js：

var selectedIdx = 3;
var selectSize = document.querySelector('select#product_sizes');
var hiddenSize = document.querySelector('input[type="hidden"]#pdp_selectedSize');
var addToCart  = document.querySelector(
        'input[type="submit"][name="pdp_addtocart"]');

if ((selectSize !== undefined) && (hiddenSize !== undefined)
        && (addToCart !== undefined)) {
    selectSize.selectedIndex = 3;
    hiddenSize.value = selectSize.value;
    addToCart.click();
}

<强>＆LT; UPDATE＆GT;

要根据尺寸进行选择，请修改 content.js ，如下所示：

var targetSize = 9.0;
var selectSize = document.querySelector('select#product_sizes');
var hiddenSize = document.querySelector('input[type="hidden"]#pdp_selectedSize');
var addToCart  = document.querySelector(
        'input[type="submit"][name="pdp_addtocart"]');

if ((selectSize !== undefined) && (hiddenSize !== undefined)
        && (addToCart !== undefined)) {
    var targetSizeStr = targetSize.toFixed(1);
    var optionFound = [].slice.call(selectSize.querySelectorAll('option'))
                              .some(function(opt) {
        if (parseFloat(opt.value).toFixed(1) === targetSizeStr) {
            hiddenSize.value = opt.value;
            return true;
        }
        return false;
    });
    optionFound && addToCart.click();
}

<强>＆LT; / UPDATE＆GT;

<子> 注意：如果您关心页面的外观（即不仅要将商品添加到购物车，而且您希望页面看起来与手动选择尺寸时的外观完全相同），您需要进行一些额外的修改。例如。隐藏<select>元素（display: none;），将data-content元素的<a>属性设置在<select>正上方<select>的值及其类size_selected，将 addToCart <a>的类设置为active_step，可能还有更多。

如何选择页面加载选项

1 个答案: