Question

点击一个按钮后，它应该在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>

任何帮助都将非常感谢!!!

Answer 1

为此，请创建并div并将其display放入none，其innerHTML设置为div。现在打开模态窗口后，您可以使用iframe编写此document.write的{{1}}，即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(); }。试试这个：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

注意：这不适用于代码片段，也适用于JSFiddle（它说：在JSFiddle环境中不允许使用document.write，可能会破坏你的小提琴）。但是，我已经在我的本地机器上测试了它，它正在按预期工作。请检查。希望这会有所帮助。

以下是我本地机器的截图：

Answer 2

很久以前我从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>

Answer 3

试一试

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

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

3 个答案: