Question

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

我的一个限制是输入框之一为空白的变化性质。我仅限于为网址的输入分配一个数字（例如-col1，op1，val1）。例如，如果“ salModBox”为空白，则它必须具有足够的动态性，才能为col1，op1，val1分配“ serNumPrefBox”。如果同时填充两者，则“ salModBox”将分别为col1，op1，val1，“ serNumPrefBox”将分别为col2，op2，val2。如果两者都没有填充，那么就不必为此设置col1或2。

如果同时填充了URL，则预期的URL输出最终将看起来像这样：

https://example.com/#/embed/viz/longID/?col1=Variable%20Number%20One&op1=EQ&val1=“ + salesMod +”＆col2 =变量％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数组中的顺序。

具有两个输入字段的iframe动态过滤器

1 个答案:

首先使用全局元素。

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

使您的代码简单实用。

最终代码：