Question

想使用onClick替换src =中'sku ='之后的变量，然后重新加载iframe。

<iframe id="preview" src="//preview.domain.com/?sku=100-1&amp;month=May"></iframe>

<div class="smr-three">
<button id="smrone" onclick="smrclickone()">test1</button>
<button id="smrtwo" onclick="smrclicktwo()">test2</button>
<button id="smrthree" onclick="smrclickthree()">test3</button>
<script>
function('smrclickone') {
    document.getElementById('preview').src = document.getElementById('preview').src.replace('sku','100-1')
};
function('smrclicktwo') {
    document.getElementById('preview').src = document.getElementById('preview').src.replace('sku','100-2')
};
function('smrclickthree') {
    document.getElementById('preview').src = document.getElementById('preview').src.replace('sku','100-3')
};
</script>

Answer 1

这更简单：

var baseUrl = "//preview.domain.com/?month=May";
window.onload=function() {
  document.querySelector(".smr-three").onclick=function(e) {
    if (e.target.tagName=="BUTTON") {
      document.getElementById('preview').src = baseUrl+"&sku="+this.getAttribute("data-sku");
    }
  }
}

使用

<iframe id="preview" src="//preview.domain.com/?sku=100-1&amp;month=May"></iframe>

<div class="smr-three">
  <button type="button" id="smrone"   data-sku="100-1">test1</button>
  <button type="button" id="smrtwo"   data-sku="100-2">test2</button>
  <button type="button" id="smrthree" data-sku="100-3">test3</button>
</div>

Answer 2

替换不符合您在这里的想法。此功能可用于更新URL中的GET参数：

function updateURLParameter(url, param, paramVal) {
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

通过以下方式在您的URL上使用它：

let preview = document.getElementById('preview')

function smrclickone() {
  preview.src = updateURLParameter(preview.src, "sku", "100-1");
  console.log(preview.src)
};

function smrclicktwo() {
  preview.src = updateURLParameter(preview.src, "sku", "100-2");
  console.log(preview.src)

};

function smrclickthree() {
  preview.src = updateURLParameter(preview.src, "sku", "100-3");
  console.log(preview.src)

};


function updateURLParameter(url, param, paramVal) {
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split('=')[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&";
      }
    }
  }

  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

<iframe id="preview" src="//preview.domain.com/?sku=100-1&month=May"></iframe>

<div class="smr-three">
  <button id="smrone" onclick="smrclickone()">test1</button>
  <button id="smrtwo" onclick="smrclicktwo()">test2</button>
  <button id="smrthree" onclick="smrclickthree()">test3</button>

替换URL onClick中的变量

2 个答案: