代码之家 › 专栏 › 技术社区 › Gupta

在iframe而不是新窗口中打开网站

html javascript

Gupta · 技术社区 · 10 年前

一旦我点击一个按钮,它应该会在 iframe ,并且模态不应有URL,因为它显示在新窗口中。模态应该位于窗口的中心。我知道使用Bootstrap很容易,但我想用纯JavaScript来实现。

HTML代码

<button type="button" class="btn" onclick="executeOnClick()" id="w3schools">
    Open Website
</button>

Javascript代码

<script type="text/javascript">
    function executeOnClick(){
        var win = open('http://www.w3schools.com/', 'example', 'width=600,height=450')
        win.focus();
        win.onload = function() {
            var div = win.document.createElement('div');
            div.innerHTML = 'Welcome into the future!';
            div.style.fontSize = '30px';
            win.document.body.insertBefore( div, win.document.body.firstChild )
        }
        return true;
    }
</script>

任何帮助都将不胜感激!!!

3 回复 | 直到 10 年前

Senjuti Mahapatra 10 年前

为此,创建和 iframe 并将其放入 div 用它 display 设置为 none 。现在,打开模态窗口后,可以编写 innerHTML 其中之一 迪夫 i、 e iframe公司 使用 document.write . 试试这个:

function executeOnClick(){
  document.getElementById('ifram1').src = 'http://www.w3schools.com';
  var divContents = document.getElementById('modal').innerHTML;
  alert(divContents);
  var modalWindow = window.open('', '', 'height=500,width=500');
  modalWindow.document.write('<html>');
  modalWindow.document.write('<body>');
  modalWindow.document.write(divContents);
  modalWindow.document.write('</body></html>');
  modalWindow.document.close();
  
  }

<button type="button" class="btn" onclick="executeOnClick()" id="w3schools">
    Open Website
</button>
<br/>
<div id="modal" style='display:none;'>
<iframe name="theFrame" id="ifram1"></iframe>
  </div>

注意:这在代码段中不起作用,在JSFiddle中也不起作用(它说:document.write在JSFidle环境中是不允许的,可能会破坏你的小提琴)。然而,我已经在我的本地机器上测试了这一点,它正在按预期工作。请检查。希望这有帮助。

这是我本地机器的屏幕截图:

zer00ne 10 年前

我从 here 很久以前,但它很简单,而且仍然完美地工作。我添加了这个按钮是为了演示,但您可能需要更改它来赞美您所使用的任何UI。

让我知道这是不是你想要的,因为你的解释措辞有点尴尬(不是指你的语法,而是很难用口头或文本描述某些事情)

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34608282</title>
  <style>
    html,
    body {
      box-sizing: border-box;
      font: 400 16px/1.45"Verdana";
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 none hlsa(0%, 0, 0, 0);
      outline: 0 none hlsa(0%, 0, 0, 0);
    }
    body {
      position: relative;
      background-color: #111;
      color: #EEE;
      padding: 10px;
    }
    #overlay {
      display: none;
      position: relative;
      left: 0;
      top: 0;
      width: 101vw;
      height: 101vh;
      text-align: center;
      z-index: 1111;
    }
    #overlay section {
      position: relative;
      top: 0;
      left: 0;
      width: 640px;
      height: 360px;
      margin: 10px auto;
      background-color: #fff;
      border: 1px solid yellow;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
    }
    #test {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 128px;
      height: 48px;
      border-radius: 8px;
      border: 1px outset yellow;
      font-size: 1.2rem;
      font-variant: small-caps;
      color: yellow;
      background: #222;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <button id="test">Test Modal</button>
  <aside id="overlay">
    <section>
      <iframe id="iFrame" name="iFrame" src="http://example.com/" frameborder="0" scrolling="no"></iframe>
    </section>
  </aside>
  <script>
    document.getElementById('test').addEventListener('click', modal, false);

    function modal() {
      var ov = document.getElementById("overlay");
      ov.style.display = (ov.style.display == "block") ? "none" : "block";
    }
  </script>
</body>

</html>

-1

Tushar 10 年前

试试看

<!DOCTYPE html>
<html>
<body>

<p><a href="http://www.runway73.com" target="iframe_a">Click For New Website</a></p>
<iframe width="300px" height="300px" src="http://facebook.com/" name="iframe_a"></iframe>


</body>
</html>