javascript - 具有两个输入字段的 Iframe 动态过滤器

Question

我正在尝试在一个带有两个输入框的 iframe 上创建一个动态过滤器。我们将输入框称为“Box 1”和“Box 2”。当两个框都没有填充时，我希望 iframe 显示所有信息。当框 A 填充时，我希望它显示框 A 上的信息。当框 B 也填充时，我希望应用两个过滤器。当仅填充框 B 时，我希望 iframe 只显示框 B 的输入。

我的一个限制是输入框之一为空的性质会发生变化。我仅限于为 URL 上的输入分配一个数字(例如 - col1、op1、val1)。例如，如果“salModBox”为空，则它需要足够动态才能为“serNumPrefBox”分配 col1、op1、val1)。如果两者都已填充，则“salModBox”需要为 col1、op1、val1，“serNumPrefBox”需要为 col2、op2、val2。如果两者都没有填充，那么就不需要有 col1 或 2。

如果两者均已填充，则 URL 的预期输出最终将如下所示:

https://example.com/#/embed/viz/longID/?col1=Variable%20Number%20One&op1=EQ&val1= "+salesMod+"&col2=Variable%20Number%20Two&op2=EQ&val2="+serNoPre+"#/moreinfo/anotherID

填充了一个变量的 URL 的预期输出:

https://example.com/#/embed/viz/longID/?col1=Variable%20Number%20One&op1=EQ&val1= “+salesMod(或 serNoPre)+”#/moreinfo/anotherID

如果两者都为空，则它只是原始 URL 源链接。这将是一次广泛的搜索。从技术上讲，用户可以在任一输入框中输入的值不受限制。

function salModSnpFilter() {
	  var salModInput = document.getElementById('salModBox').value;
	  var serNumPrefInput = document.getElementById('serNumPrefBox').value;
	  var smSnp = '';
	  if (salModInput = ' ' and serNumPrefInput = ' ') {"https://en.wikipedia.org/wiki/IFrame"
	  } else if (salModInput = ' ' and serNumPrefInput != ' ') {"https://en.wikipedia.org/wiki/IFrame" + serNumPrefInput
      } else if (serNumPrefInput = ' ' and salModInput != ' ') {"https://en.wikipedia.org/wiki/IFrame" + salModInput
      } else if (salModInput != ' ' and serNumPrefInput != ' ' {"chttps://en.wikipedia.org/wiki/IFrame"+salModInput+serNumPrefInput
	  } else {"https://en.wikipedia.org/wiki/IFrame"
	  }

    var salModString = "https://en.wikipedia.org/wiki/IFrame" + salModInput";
    var serNumPrefString = "https://en.wikipedia.org/wiki/IFrame" + serNumPrefInput";
    var bothString = "https://en.wikipedia.org/wiki/IFrame" + serNumPrefInput + salModInput";

	document.getElementById('SM_SNPiFrame').src = salModString;
	document.getElementById('SM_SNPiFrame').src = serNumPrefString;
  document.getElementById('SM_SNPiFrame').src = bothString;
  
}

<div>
  <input name="textfield" type="text" class="guidedQueryEntry" placeholder="Box A" name="Box A" id="salModBox">
</div>
<div>
  <input name="textfield" type="text" class="guidedQueryEntry" placeholder="Box B" name = "Box B" id="serNumPrefBox">
</div>
<div>
  <iframe src="https://en.wikipedia.org/wiki/IFrame"
			 width="100%" height="600" style="border-color:#FFCD11" id="SM_SNPiFrame" allowfullscreen></iframe>
</div>

我最终使用了这段代码并且它起作用了:

    function filterSelection() {
        var smBoxValue = document.getElementById("salModBox").value;
        var snpBoxValue = document.getElementById("serNumPrefBox").value;
        if (smBoxValue != "" && snpBoxValue != "") {var combinedModString = 
        "https://example.com/col1=Serial%20Number%20Prefix&op1=EQ&val1=" + 
         snpBoxValue +"&col2=Sales%20Model%20BOM%20EDS&op2=EQ&val2=" + 
         smBoxValue";
         document.getElementById('SM_SNPiFrame').src = combinedModString;
         }
         else if (smBoxValue == "" && snpBoxValue != "") {var snpModString = 
         "https://example.com/#/col1=Serial%20Number%20Prefix&op1=EQ&val1=" 
         + snpBoxValue;
         document.getElementById('SM_SNPiFrame').src = snpModString;
         }
         else if (smBoxValue != "" && snpBoxValue == "") {var salModString = 
         "https://example/col1=Sales%20Model%20BOM%20EDS&op1=EQ&val1=" + 
         smBoxValue;
         document.getElementById('SM_SNPiFrame').src = salModString;
         }
         else {document.getElementById('SM_SNPiFrame').src = 
         "https://example.com/";
         }  
         }  

Answer 1

您的代码似乎比您的问题有点复杂，我将向您解释如何纠正此问题并使用 JavaScript 中的一些良好实践。

由于您需要处理输入标记内的值并将它们使用到 iFrame 标记中，因此我们将执行以下操作:

全局元素优先。

由于我们可能只需要定义一次哪个 DOM 元素是 iFrame 标记以及哪些是 input 标记，因此让它们放在最开始的位置:

var iframe = document.getElementById('SM_SNPiFrame'),
    elements = [
        document.getElementById('salModBox'),
        document.getElementById('serNumPrefBox')
    ],
    strings = [];

此外，我们定义了一个 strings 变量，它将帮助我们将输入值存储在与 elements 数组相同的索引中。

为每个元素设置事件监听器。

定义了要使用的元素后，现在我们应该处理其值的更改。最快速的效果是使用 keyup 事件，每次用户键入时都会传递值:

elements.forEach((e,index)=>{
    e.addEventListener("keyup",event=>{
    strings[index] = event.target.value;
    salModSnpFilter();
  });
});

在此事件监听器中，您需要设置每次触发此事件时将发生的情况。我只是做了一个简单的函数将新值存储到相同的索引但不同的数组(字符串数组)中。

完成后，调用将更新 iFrame 标记的函数。

保持代码简单且实用。

函数salModSnpFilter()不需要大量的if语句和多次出现的相同字符串来处理iFrame的新源。让代码保持简单:

const salModSnpFilter = () => {
    let source = "https://en.wikipedia.org/wiki/IFrame",
        finalString = "/"; //You can set it to empty: "" if you dont want slashes.
    strings.forEach(string => {
        if (string !== "") {
            finalString += string; //You can add a slash with  by adding: + "/" between the s and the semicolon.
        }
    });
    iframe.src = source + finalString;
};

我们在顶部的一个变量中定义基本 URL，并用一个变量来保存我们将附加到基本源的字符串。

我们迭代 strings 数组，并按照输入的相同顺序将此字符串添加到 finalString 数组中。

在此之后，唯一要做的就是设置 iFrame 标记的源。

最终代码:

var iframe = document.getElementById('SM_SNPiFrame'),
		elements = [
      document.getElementById('salModBox'),
      document.getElementById('serNumPrefBox')
    ],
    strings = [];

elements.forEach((e,index)=>{
	e.addEventListener("keyup",event=>{
  	strings[index] = event.target.value;
    salModSnpFilter();
  });
});

const salModSnpFilter = () =>{
  let source = "https://en.wikipedia.org/wiki/IFrame",
  		finalString = "/";//You can set it to empty: "" if you dont want slashes.
  strings.forEach(string=>{
  	if(string !== ""){
    	finalString += string; //You can add a slash with  by adding: + "/" between the s and the semicolon.
    }
  });
	iframe.src = source + finalString;
};

<div>
    <input name="textfield" type="text" class="guidedQueryEntry" placeholder="Box A" name="Box A" id="salModBox">
</div>
<div>
    <input name="textfield" type="text" class="guidedQueryEntry" placeholder="Box B" name="Box B" id="serNumPrefBox">
</div>
<div>
    <iframe src="https://en.wikipedia.org/wiki/IFrame" width="100%" height="600" style="border-color:#FFCD11" id="SM_SNPiFrame" allowfullscreen></iframe>
</div>

注意:字符串的顺序以及它们在 iFrame 上的使用方式与您添加的顺序相同elements 数组的输入。这意味着，inputA 值将始终位于 inputB 值之前。除非您更改 elements 数组中的顺序。