Question

我想隐藏显示我的脚本当前点击按钮我有一个创建iframe的脚本，但它始终可见我想要的是添加一个按钮到这个脚本以附加崩溃的功能即点击它最大化/最小化iframe

脚本

<script type='text/javascript' charset='utf-8'>
  var iframe = document.createElement('iframe');
  document.body.appendChild(iframe);
  iframe.src = 'http://www.google.com';
  iframe.style.position = 'fixed';
  iframe.style.bottom='1%'
  iframe.style.right='1%'
  iframe.width = '315px';
  iframe.height = '380px';
</script>

想要在此脚本中添加按钮以及可以在点击按钮时隐藏或显示的iframe

非常感谢任何帮助

Answer 1

除非你需要，我建议你在javascript之外创建你的html元素。但这是一个全javascript解决方案：

<script type='text/javascript' charset='utf-8'>
  var iframe = document.createElement('iframe');
  iframe.src = 'http://www.google.com';
  iframe.style.position = 'fixed';
  iframe.style.bottom='1%'
  iframe.style.right='1%'
  iframe.width = '315px';
  iframe.height = '380px';
  iframe.id = 'theIframe';
  document.body.appendChild(iframe);

  var collapseButton = document.createElement('button');
  collapseButton.innerHTML = "Collapse!";
  collapseButton.onclick = function() {
    var iframe = document.getElementById('theIframe');
    iframe.style['display'] = iframe.style['display'] === 'none' ? 'block' : 'none';
  }
  document.body.appendChild(collapseButton);
</script>

https://jsfiddle.net/v0coh8f9/

此外，JQuery提供.show（）,. hide（）和.toggle（）方法。

Answer 2

HTML

<button id="button">Toggle iFrame</button>

的javascript

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.src = 'http://www.google.com';
iframe.style.position = 'fixed';
iframe.style.bottom='1%'
iframe.style.right='1%'
iframe.width = '315px';
iframe.height = '380px';
iframe.style.display = 'none';

document.getElementById('button').addEventListener('click', function() {
  iframe.style.display = iframe.style.display === 'block' ? 'none' : 'block';
});

工作小提琴：https://jsfiddle.net/j24yed3v/

单击按钮时隐藏显示脚本

2 个答案: