需要帮助在 SquareSpace 上引用 DOM 元素
Posted
技术标签:
【中文标题】需要帮助在 SquareSpace 上引用 DOM 元素【英文标题】：Need help referencing a DOM element on SquareSpace 【发布时间】：2021-03-07 17:39:45 【问题描述】：我正在尝试破解 SquareSpace 网站以更改从 GET 变量中选择的下拉菜单的值。
我正在努力引用 via document.getElementsByClassName 或 document.getElementsByID 的 DOM 元素，因此我可以使用 JS 更改值。
SquareSpace 对元素有奇怪的引用，并且 html 无法更改，尤其是在这种情况下。我是一个 javascript 新手，可以从专家那里获得一些帮助...
问题：如何在 JavaScript 中引用下拉菜单的 DOM 元素？可以使用document.getElementBy...？
<div class="product-variants" data-item-id="5f6d19150f4fd9415d8a1586" data-variants="["attributes":"Size":"Small | 100 Photos","optionValues":["optionName":"Size","value":"Small | 100 Photos"],"id":"68115c8d-399e-475b-8ea9-9543ad86cb02","sku":"SQ5845728","price":11900,"salePrice":0,"priceMoney":"currency":"USD","value":"119.00","salePriceMoney":"currency":"USD","value":"0.00","onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0,"attributes":"Size":"Medium | 250 Photos","optionValues":["optionName":"Size","value":"Medium | 250 Photos"],"id":"dcfe8568-7199-4e68-91e2-d0f202fecdf7","sku":"SQ2105082","price":26900,"salePrice":0,"priceMoney":"currency":"USD","value":"269.00","salePriceMoney":"currency":"USD","value":"0.00","onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0,"attributes":"Size":"Large | 500 Photos","optionValues":["optionName":"Size","value":"Large | 500 Photos"],"id":"494878cf-2af2-422c-91ec-e6d1850423aa","sku":"SQ9044986","price":49900,"salePrice":0,"priceMoney":"currency":"USD","value":"499.00","salePriceMoney":"currency":"USD","value":"0.00","onSale":false,"unlimited":true,"qtyInStock":0,"width":0.0,"height":0.0,"weight":0.0,"imageIds":[],"images":[],"len":0.0]" data-animation-role="content">
<div class="variant-option">
<div class="variant-option-title">Size: </div>
<div class="variant-select-wrapper">
<select aria-label="Select Size" data-variant-option-name="Size">
<option value="">Select Size</option>
<option value="Small | 100 Photos">Small | 100 Photos</option>
<option value="Medium | 250 Photos">Medium | 250 Photos</option>
<option value="Large | 500 Photos">Large | 500 Photos</option>
</select>
</div>
<div class="variant-radiobtn-wrapper" data-variant-option-name="Size">
<input type="radio" class="variant-radiobtn" value="Small | 100 Photos" name="variant-option-Size" id="variant-option-Size-Small | 100 Photos"/>
<label for="variant-option-Size-Small | 100 Photos">Small | 100 Photos</label>
<input type="radio" class="variant-radiobtn" value="Medium | 250 Photos" name="variant-option-Size" id="variant-option-Size-Medium | 250 Photos"/>
<label for="variant-option-Size-Medium | 250 Photos">Medium | 250 Photos</label>
<input type="radio" class="variant-radiobtn" value="Large | 500 Photos" name="variant-option-Size" id="variant-option-Size-Large | 500 Photos"/>
<label for="variant-option-Size-Large | 500 Photos">Large | 500 Photos</label>
</div>
</div>
</div>
注意 - 我可以使用 .page-section[data-section-id="5f7bc0326befc806d06d1e5b"] 选择器在 CSS 中引用 data-item-id。
【问题讨论】：
你忘了这个问题吗？所有这些都建立起来和背景故事......但毫无疑问。鉴于您这么说，到底是什么问题：“我可以使用 .page-section[data-section-id="5f7bc0326befc806d06d1e5b"] 选择器引用 CSS 中的数据项 ID。" @RandyCasburn 对不起。上面的问题。 好的-好的开始-但是哪个元素？您可以像获得包装器一样获得<select>：select[data-variant-option-name=Size]。拥有该 DOM 节点后，选项数组位于 options 属性中。是这样吗？
对......但我对语法感到困惑。 var x = document.getElementsByClassName("select[data-variant-option-name=Size]").id; alert(x); 这就是我所拥有的——但它不起作用。再说一次，我是 JS 新手，根据我读过的文档，我有点难过
我希望发送一个 GET 字符串 ?size=Small%20%7C%20100%20Photos 并更改下拉菜单的选择。
【参考方案1】：
首先获取“select”元素，然后获取您需要的选项，并将 selected 属性设置为“selected”。但如果存在多个“选择”标签，请小心。既然你得到了一个元素数组，你应该知道想要的元素的索引。
document.getElementsByTagName('select')[0].getElementsByTagName('option')[2].selected='selected';
既然你想按值设置，你可以使用
document.getElementsByTagName('select')[0].value = 'Small | 100 Photos';
最好的选择是以这种方式获取您提到的父元素
document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]')
然后进一步寻找想要的元素。这样你就可以确定你有一个正确的。但它要求 data-item-id 是唯一且静态的。
组合起来会是这样的：
document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select')[0].value = 'Small | 100 Photos';
【讨论】：
感谢您的回答。要查看解决此问题的最终代码，请参见下文【参考方案2】：对于那些有兴趣的人，这是我解决上述问题的最终代码，@ÿmit 的输入。这被放入 SquareSpace 商业页面页脚的代码块中。
<script type = "text/javascript">
//https://www.denisbouquet.com/squarespace-code-injection-page-transition-run-script-page-reload/ - thanks to Denis Bouquet for this wrapper
$(function()
function changeSizeMenu()
//put all get parameters into an object called $_GET
//https://***.com/a/12049737/2880312 - thanks to @gion_13 and @vrijdenker
var $_GET = ;
if (document.location.toString().indexOf('?') !== -1)
var query = document.location
.toString()
// get the query string
.replace(/^.*?\?/, '')
// and remove any existing hash string (thanks, @vrijdenker)
.replace(/#.*$/, '')
.split('&');
for (var i = 0, l = query.length; i < l; i++)
var aux = decodeURIComponent(query[i]).split('=');
$_GET[aux[0]] = aux[1];
//if the $_GET['select'] parameter is empty, return false
if(!$_GET['Size'] || $_GET['Size'] == '')
// return FALSE;
console.log("Get parameter 'Size' = " + $_GET['Size']); ////for debugging
//get array with all selects within data-item-id 5f6d19150f4fd9415d8a1586 - thanks @ÿmit
var selectItems = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByTagName('select');
//if the selectItems array is empty, return false
if(!selectItems || selectItems.length == 0)
//return FALSE;
console.log("selectItems is empty"); ////for debugging
//loop through all selects within data-item-id 5f6d19150f4fd9415d8a1586
for (si = 0; si < selectItems.length; si++)
if(selectItems[si].getAttribute("data-variant-option-name") == 'Size')
//if the data-variant-option-name is "Size" - that's the array key we want.
break;
//get label element for later
var label = document.querySelector('div[data-item-id="5f6d19150f4fd9415d8a1586"]').getElementsByClassName("variant-select-wrapper")[si];
// get all the option items from the "Size" select menu; key identified as `si` above
var optionItems = selectItems[si].getElementsByTagName('option')
//if the optionItems array is empty, return false
if(!optionItems || optionItems.length == 0)
// return FALSE;
console.log("optionItems is empty"); ////for debugging
for (oi = 0; oi < optionItems.length; oi++)
if(optionItems[oi].value == $_GET['Size'])
console.log("MATCH" + optionItems[oi].value); //for debugging
//change the label on the drop-down menu
label.setAttribute("data-text", $_GET['Size']);
optionItems[oi].selected = 'selected';
else
optionItems[oi].selected = '';
console.log(oi + ":" + optionItems[oi].value); //for debugging
// run the function on first load of the website
changeSizeMenu();
// track every time we change of page
$("body").on('click', ".Header-nav-item", function()
setTimeout(function()
changeSizeMenu();
, 500); // add a delay before to run the code again
);
)
</script>
【讨论】：
以上是关于需要帮助在 SquareSpace 上引用 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章
将 AWS CloudFront CDN 放在 squarespace 网站前面需要哪些设置？