在iframe中而不是在新窗口中打開網站

一旦我點擊一個按鈕，它應該在iframe中打開一個網站，並且該模式不應該有一個URL，因爲它顯示在新窗口中。模態應該在窗口的中心。因爲我知道使用Bootstrap很容易，但我想用純JavaScript來做到這一點。在iframe中而不是在新窗口中打開網站

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>

任何幫助將不勝感激！

來源

2016-01-05 VKatz

作爲一個說明，你不能在一個iframe從不同的域添加/編輯內容。 – Cristy

@Cristy：那很好..我想要的是打開一個網站，其中有電子郵件和密碼來驗證用戶，並希望獲得關於廣告的一些信息。 – VKatz

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

來源

2016-01-05 12:22:27 zer00ne

@Vinay所以你是否在模態內尋找一個iframe？我的回答證明了這一點。它可能看起來像一個普通的模式，但它實際上是一個適用於example.com的iframe。 – zer00ne

爲此，請創建iframe，並將其置於div之內，其display設置爲none。現在打開模式窗口後，您可以使用document.write編寫此div的innerHTML，即iframe。試試這個：

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（它說：文件撰寫中的jsfiddle環境不允許，可能會打破你的小提琴）。然而，我已經在我的本地機器上測試過了，它按預期工作。請檢查。希望這可以幫助。

下面是截圖，從我的本地機器：

來源

2016-01-05 09:43:45

但它並不是模態。 – VKatz

所以你想打開一個模式內的'iframe'？ –

是!!!這就是我在找的東西。 – VKatz

-1

試試看

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

來源

2016-01-05 10:14:53 Tushar

在iframe中而不是在新窗口中打開網站

回答

相關問題