Question

我的html页面中有一个iframe元素。 iframe的src属性会根据用户选择的值[SHAP,LIME]动态变化。用户值显示为ID为explanationType的下拉列表。

但是，如果用户选择SHAP，但当用户选择LIME时，我需要在HTML页面中添加其他iframe。如何实现呢？

HTML

<iframe id="js-iframe" src="https://www.youtube.com/watch?v=hVCYwwFwGEE&list=RDhVCYwwFwGEE&index=1" width="100%" height="80%" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>

JS

// Update iframe
var explanationTypeOptions = document.getElementById("explanationType");

var explanationURL = explanationTypeOptions.options[explanationTypeOptions.selectedIndex].getAttribute('kibanaurl');

if(explanationURL) {
  var iframeDOMHandler = document.getElementById("js-iframe");
  iframeDOMHandler.setAttribute('src', explanationURL);
}

Answer 1

当您更改选择选项时，您可以收听onchange事件并在那里进行逻辑处理。

代码看起来像这样：

var $sel = document.getElementById('explanationType');

$sel.onchange = function (e) {
    var selectedValue = e.target.value;
    var $option = e.target.options[e.target.selectedIndex];
    var url = $option.getAttribute('kibanaurl');

    if (url) {
        document.getElementById("js-iframe").setAttribute('src', url);
    }

    if (selectedValue === 'SHAP') {
        var $newIFrame = document.createElement("iframe");
        $newIFrame.setAttribute("src", "http://example.com");
        $newIFrame.style.width = "300px";
        $newIFrame.style.height = "300px";
        document.body.appendChild($newIFrame);
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  
  <select id="explanationType">
    <option value="SHAP" kibanaurl="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg">SHAP</option>
    <option value="LIME" kibanaurl="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg">LIME</option>
  </select>

  <iframe id="js-iframe" src="https://www.youtube.com/watch?v=hVCYwwFwGEE&list=RDhVCYwwFwGEE&index=1" width="100%" height="80%" frameborder="0">
    <p>Your browser does not support iframes.</p>
  </iframe>
  
</body>
</html>

如何将iframe元素动态添加到html中？

1 个答案: