首页 > 解决方案 > 我怎样才能使 tag react to a variable?</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - 我怎样才能使<iframe> tag react to a variable?</h1> </div> <div class="con"> <h3>问题描述</h3> <p>So I want to make the iframe tag react to a variable. How?</p>

<p>Take a look at this one:</p>

<pre><code><iframe
 width="500"
 height="500"
 src=website
></iframe>

<script>
 var website = document.getElementById("textBox").value;
</script>
</code></pre>
<p class="author">标签： <span>javascript</span><span>html</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>例如，一种更安全的方法是将更改 iframe 的操作委托<code>src</code>给单击按钮，这样您就可以避免多次刷新。</p> <p>您可以在此页面上运行此示例： </p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('#changeButton').onclick = function() { document.querySelector('#iframex').src = document.querySelector('#textBox').value }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#textBox { width: 75% } #changeButton { width: 20% } iframe { width: 95% }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input type="text" id="textBox" value="https://fr.wikipedia.org/wiki/Main_Page" /> <button type="button" id="changeButton">change iframe source</button> <iframe src="" id="iframex"></iframe></code></pre> </div> </div> <p></p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/64479809.html">javascript - instanceof 运算符可以用于测试任何值类型吗？</a></li><li><a href="/question/64479810.html">javascript - 不从 HTML 生成 PDF/图像文件</a></li><li><a href="/question/64479813.html">javascript - javascript错误SyntaxError：缺少：属性ID之后</a></li><li><a href="/question/64479817.html">javascript - 访问 Stripe 门户</a></li><li><a href="/question/64479820.html">docker - 服务器 2019 机器上的 Linux 容器</a></li><li><a href="/question/64479821.html">linux - 为什么即使使用 nohup 也会捕获挂断信号？</a></li><li><a href="/question/64479822.html">typo3 - TYPO3：如何显示来自不同页面的内容元素</a></li><li><a href="/question/64479826.html">azure - Azure 管道如何从内部 TFS 和外部 Git 获取源？如何更新代理？</a></li><li><a href="/question/64479828.html">java - 有什么区别吗？SwingWorker#publish vs SwingUtilities#invokeLater</a></li><li><a href="/question/64479830.html">spring - 使用 UUID 获取对象时出现 Spring Boot 错误</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>