如何使 <iframe> 标记对变量做出反应？ (2)答案

【问题标题】：How can I make the <iframe> tag react to a variable? (2)如何使 <iframe> 标记对变量做出反应？ (2)
【发布时间】：2020-05-19 07:16:47
【问题描述】：

我一直在尝试做某事，描述为here。有人回答了，我试了一下。好吧，结果是 iframe 每秒都在闪烁。这是代码：

<!DOCTYPE html>
<body>
  <script type="text/javascript">
  function iframeDidLoad() {
    var website = "https://bing.com"
    document.getElementById('myIframe').src = website;
  }
  </script>

  <iframe
    width="500"
    height="500"
    onLoad="iframeDidLoad();"
    src=""
    id="myIframe"
  ></iframe>
</body>
</html>

谁能解决？

【问题讨论】：

这能回答你的问题吗？ How can I make the <iframe> tag react to a variable?
哦，那也是我的！我只是说一个人的答案是这样的结果。

标签： javascript html function web iframe

【解决方案1】：

在 javascript 中，您始终将变量名称设置为等于分配给它的任何名称，因此例如使用：

var myFrame=document.getElementById('myIframe');

而不是反过来。

另外，鉴于你使用.src，我猜你可能误解了函数的功能，看看https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

要在其中显示您的页面，然后使用

myFrame.setAttribute('src','<linktoyourpage>');

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

更新

<!DOCTYPE html>
<body>
  <input type="text" id="typed-site"/>
  <button onclick="showSite()">Display Typed Site</button>
  <iframe
    width="500"
    height="500"
    src=""
    id="myIframe"
  ></iframe>
  <script type="text/javascript">
  function showSite() {
    let retrievedSite = document.getElementById('typed-site').value;
    document.getElementById('myIframe')
      .setAttribute("src",retrievedSite);
  }
  </script>
</body>
</html>

【讨论】：

哦，我的计划是一个文本框，你输入网站，网站就会显示。我认为它不适用于myFrame.setAttribute('src','<linktoyourpage>');
那么在这种情况下，您只需提供一个带有的输入字段，然后创建一个“确定”按钮并通过 onclick 将该“确定”按钮绑定到一个函数事件监听器。该函数应首先检索输入字段的值，然后执行myFrame.setAttribute('src',<retrievedvalue>)。 100% 有效。
此外，您为什么要这样做？提供在您的页面上插入任何人的网站的可能性是非常危险的，从安全的角度来看，这绝对不是一个好主意...
我知道，但我打算做一个项目预览。是用户在网站上输入一个项目的ID，然后项目就会显示出来。i
好的，我在上面的评论中描述的输入字段和“确定”按钮有效。