如何在JavaScript中使用HTML变量？

我试图以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>

函数openPdf（）{
var myFrame=document.getElementById（“myFrame”）；
myframe.display=“隐藏”//1
myframe.style.display=“block”；
myframe.src=”https://drive.google.com/"; // 2
}

我不确定这是否有效。如果我按下pdf文件2，那么如果其他pdf文件已经打开，它应该关闭，然后“pdf 2”应该打开。简而言之，一次只能打开一个pdf文件，其他pdf文件应关闭或隐藏，但所有按钮都应可见

它正在工作，但我必须在每个按钮中重复代码。我想用一个变量来更改这个常量地址，我想在按钮中提到pdf文件的地址，如上所述

src=

。这样我就不必重复每个按钮的功能了

---

不，不幸的是，你不能在里面放一个动态变量

---

您可以在函数中获取

id

以查看按下了哪个按钮，并相应地写入不同的

src

。

如果使用，则不必从HTML中读取任何内容

函数openPdf（url）{
var myFrame=document.getElementById（“myFrame”）；
myframe.style.display=“block”；
myframe.src=url
}

如果参数未设置或为空，您可能还需要再次隐藏

：

<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>

函数openPdf（url）{
var myFrame=document.getElementById（“myFrame”）；
如果（url的类型！='undefined'&&url！=''）{
myframe.style.display=“block”；
myframe.src=url
}否则{
myframe.style.display=“无”；
}
}

您可以使用

事件.target

单击

元素
。要获取其
属性的值，可以使用
getAttribute（'scr'）
。因此，要获得所需的值，可以使用
var scr=event.target.getAttribute（'scr'）

我已经从每个
输入中删除了
id
，因为它没有任何用途。还使用正确的
src
更正了
scr
中的打字错误

根据将
event
添加到
onclick=“openPdf（event）”
而不是直接在代码中使用的建议

在下面试试


函数openPdf（e）{
var src=e.target.getAttribute（'src'）；
console.log（src）；
//你的代码
}




您甚至不需要JavaScript，只需使用一个锚，将myframe指定为
target
。显然，应该启用CORS，否则将无法工作

如果需要，可以使用CSS将锚定样式设置为按钮


卡兰：不应该使用<代码>事件<代码>（通过），考虑将它们添加到<代码> OpenPDF（）/<代码>调用中。此外，重复和未使用的
id=“src”
-s也可以删除。attr
scr
中的打字错误最好是将您的问题用文字表达出来，而不是仅仅粘贴源代码并让社区修复。@EsaJokinen好吧，实际的问题不是很清楚，但不是关于显示iframe。我们仍然可以将其添加到我的示例中。iframe最初是
display:none
，而JS将其更改为
display:block
，这是一个预期功能的指示器，但问题可以更清楚地说明所需的功能。不过，如果您可以演示一个没有JS的解决方案，可能使用HTML5，那就太好了。@EsaJokinen我把它理解为“如何将变量传递给事件处理程序”，但这只是一个猜测；-）。我不认为没有JS你想做什么，但是请随意问一个单独的问题。我想我最初不会在iframe上设置固定样式，而是使用JS来隐藏它（并在锚的单击处理程序中再次显示它）。如果JS不知何故不可用，它仍然可以工作。好吧，我甚至不会首先使用iframe，只是简单地链接到PDF文件。：）@埃萨约基宁更好！请告诉OP:-）
<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>