單擊按鈕後如何顯示 iframe

Nathan 发表于 Dev

彌敦道

所以我試圖將我的 iframe 隱藏在頁面上，直到我點擊這個按鈕，但由於某種原因，當網站加載 iframe 時，我可以用按鈕隱藏它，但我試圖將它隱藏起來開始。

var iframeShowing=false;
function show() {
  var iframe1=document.getElementById("iframe");
  iframe1.style.display=iframeShowing ? "block": "none";
  iframeShowing=!iframeShowing;
}

<form> <button type="button" id="files" onclick="show()">Database</button> </form>
<iframe id="iframe" frameBorder='no' src="https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt"
  width="600" height="460"></iframe>

邁克·洛瑞

Javascript 有很好的功能 ( classList.toggle)。如果有人點擊按鈕，我建議開始加載表格。如果你身邊有很多桌子，頁面會很慢。我已經把它作為一個例子。

function show() {
  const f = document.getElementById('myiframe');  
  const link = 'https://databank.worldbank.org/embed/Mine/id/f1b36ffc?ti=y&ds=n&dd=y&tb=y&sh=y&dw=y&pr=y&inf=y&zm=y&md=y&navigator=n&theme=darkGrey&bdrClr=rgb(68,68,68)&bdrStyle=solid&bdrWidth=0px&title=Arial;16px;true;false;rgb(68,68,68);justify&exptypes=Excel,CSV,TabbedTxt';
  document.getElementById('waiting').innerText = " - please wait";
  f.classList.toggle('hide');
  f.setAttribute('src', link);
}

.hide {
  display: none;
}

<form> 
    <button type="button" id="files" onclick="show()">Database<span id="waiting"></span></button> 
</form>
<iframe class="hide" id="myiframe" frameBorder='no' src="" width= "600"  height="460" >...</iframe>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。