如何在 JavaScript 中使用 HTML 变量？
[英]How to use an HTML variable in JavaScript?
问题描述
我正在尝试以这种方式在 JavaScript 中使用 HTML 变量src ：
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" id="src"
onclick="openPdf()" src="https://drive.google.com/" />
<input type="button" value="PDF 2" id="src"
onclick="openPdf()" src="https://drive.google.com/" />
<input type="button" value="PDF 3" id="src"
onclick="openPdf()" src="https://drive.google.com/"/>
<script type="text/javascript">
function openPdf() {
var omyFrame = document.getElementById("myFrame");
omyFrame.display = "hidden"; // 1
omyFrame.style.display="block";
omyFrame.src = "https://drive.google.com/"; // 2
}
</script>
我不确定这是否有效。 如果我按下 pdf 文件 2，那么如果其他一些 pdf 文件已经打开，它应该关闭，然后“PDF 2”应该打开。 简而言之，一次只能打开一个 pdf 文件，其他 pdf 文件应该关闭或隐藏，但所有按钮都应该可见。
它正在工作，但我必须在每个按钮中重复代码。 我想用一个变量来改变这个常量地址，我想在上面的按钮中提到 pdf 文件的地址
src=。 这样我就不必重复每个按钮内的功能。
4 个解决方案
解决方案1
1 2020-07-30 09:54:19
如果您使用JavaScript Function 参数，则无需从 HTML 中读取任何内容。
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" onclick="openPdf('https://example.com/pdf1.pdf')" />
<input type="button" value="PDF 2" onclick="openPdf('https://example.net/pdf2.pdf')" />
<input type="button" value="PDF 3" onclick="openPdf('https://example.com/pdf3.pdf')" />
<script type="text/javascript">
function openPdf(url) {
var omyFrame = document.getElementById("myFrame");
omyFrame.style.display="block";
omyFrame.src = url
}
</script>
如果参数未设置或为空，您可能还想再次隐藏<iframe> ：
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" onclick="openPdf('https://example.com/pdf1.pdf')" />
<input type="button" value="PDF 2" onclick="openPdf('https://example.net/pdf2.pdf')" />
<input type="button" value="PDF 3" onclick="openPdf('https://example.com/pdf3.pdf')" />
<input type="button" value="HIDE 1" onclick="openPdf('')" />
<input type="button" value="HIDE 2" onclick="openPdf()" />
<script type="text/javascript">
function openPdf(url) {
var omyFrame = document.getElementById("myFrame");
if (typeof url !== 'undefined' && url != '') {
omyFrame.style.display="block";
omyFrame.src = url
} else {
omyFrame.style.display="none";
}
}
</script>
解决方案2
1 2020-07-30 10:11:08
您可以使用event.target获得clicked element 。 要获取其attribute的值，您可以使用getAttribute('scr') 。 因此，要获得所需的值，您可以使用var scr = event.target.getAttribute('scr'); .
我已经从每个input中删除了id ，因为它没有任何用途。 还用正确的src更正了scr的错字。
根据@tevemadar的建议，将event添加到onclick="openPdf(event)"而不是直接在代码中使用。
在下面试试。
function openPdf(e) { var src = e.target.getAttribute('src'); console.log(src); // your code }
<input type="button" value="PDF File 1" onclick="openPdf(event, this)" src="https://drive.google.com/" /></br> <input type="button" value="PDF File 2" onclick="openPdf(event)" src="https://google.com/" /></br> <input type="button" value="PDF File 3" onclick="openPdf(event)" src="https://stack.com/" />
解决方案3
1 2020-07-30 10:28:23
您甚至不需要 JavaScript，只需使用 myframe 指定为target的锚。 显然，应该启用 CORS，否则这将不起作用。
如果需要，您可以使用 CSS 将锚定样式设置为按钮。
<!DOCTYPE html>
<html>
<body>
<a href="https://example.com/pdf1.pdf" target="myframe" rel="noreferrer noopener">Click here</a>
<iframe name="myframe" width=500 height=500></iframe>
</body>
</html>
解决方案4
-2 2020-07-30 09:45:57
不，不幸的是，您不能在其中放入动态变量。
您可以在 function 中获取id以查看按下了哪个按钮，并相应地编写不同的src 。
如何在 HTML src 标签中使用 JavaScript 变量
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.