如何根據複選框輸入更改iframe屬性？

首先，我很抱歉我的代碼太糟糕了。總新手在這裏。如何根據複選框輸入更改iframe屬性？

爲了好玩，我正在組建一個基本網站，讓您查看sandboxed iframe中的另一個網站。到目前爲止，我從互聯網上找到的代碼和我自己非常基本的html知識中匆匆地把它們混爲一談。我堅持的是如何實現沙箱功能。

我在找的是我在網站上打開和關閉沙箱覆蓋的複選框。我不知道足夠的Java腳本來做到這一點。任何幫助，將不勝感激。

<html> 
 
<head> 
 
    <title> 
 
     Bubble Wrap 
 
    </title> 
 
    <script type="text/javascript"> 
 
     function wrapWebsiteInBubble(){ 
 
      var browserFrame = document.getElementById("bubble"); 
 
      browserFrame.src= document.getElementById("wrap").value; 
 
     } 
 
    </script> 
 
</head> 
 
<body style="font-family:sans-serif;"> 
 
    <input type="checkbox" id="allow-forms" value="allow-forms"> Allow forms 
 
    <input type="checkbox" id="allow-pointer-lock" value="allow-pointer-lock"> Allow pointer lock 
 
    <input type="checkbox" id="allow-popups" value="allow-popups"> Allow popups 
 
    <input type="checkbox" id="allow-same-origin" value="allow-same-origin"> Allow same origin 
 
    <input type="checkbox" id="allow-scripts" value="allow-scripts"> Allow scripts 
 
    <input type="checkbox" id="allow-top-navigaton" value="allow-top-navigation"> Allow top navigation 
 
    <br> 
 
    <form method="post" target="bubble"> 
 
     <input type="text" id="wrap" style="width:88%;" placeholder="https://www.example.com" name="url"/> 
 
     <input style="width:8%;" type="button" value="Wrap" onclick="wrapWebsiteInBubble(); return false;"/> 
 
    </form> 
 
    <iframe id="bubble" name="bubble" src="http://google.com" style="height:100%; width:100%"></iframe> 
 
</body> 
 
</html>

附：有什麼我應該做的，以使我的代碼更好？

來源

2017-10-10 Jacob Grassi

_P.S。有什麼我應該做的，以使我的代碼更好？_請參閱我更新的答案，並解釋我所做的更改以及原因。 – JustCarty

我修復了代碼。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Bubble Wrap</title> 
 
    
 
    <script type="text/javascript"> 
 
     function wrapWebsiteInBubble() { 
 
      var browserFrame = document.getElementById("bubble"); 
 
      browserFrame.src = document.getElementsByName("url")[0].value; 
 

 
      // get which checkboxes are checked 
 
      var sandbox = ""; 
 

 
      if (document.getElementById("allow-forms").checked) { 
 
       sandbox += "allow-forms "; 
 
      } 
 
      if (document.getElementById("allow-pointer-lock").checked) { 
 
       sandbox += "allow-pointer-lock "; 
 
      } 
 
      if (document.getElementById("allow-popups").checked) { 
 
       sandbox += "allow-popups "; 
 
      } 
 
      if (document.getElementById("allow-same-origin").checked) { 
 
       sandbox += "allow-same-origin "; 
 
      } 
 
      if (document.getElementById("allow-scripts").checked) { 
 
       sandbox += "allow-scripts "; 
 
      } 
 
      if (document.getElementById("allow-top-navigaton").checked) { 
 
       sandbox += "allow-top-navigaton "; 
 
      } 
 

 
      browserFrame.sandbox = sandbox; 
 
     } 
 
    </script> 
 
</head> 
 
<body style="font-family: sans-serif;"> 
 
    <form id="myForm" method="post" target="bubble"> 
 
     <label><input type="checkbox" name="sandbox" id="allow-forms" value="allow-forms" /> Allow forms</label> 
 
     <label><input type="checkbox" name="sandbox" id="allow-pointer-lock" value="allow-pointer-lock" /> Allow pointer lock</label> 
 
     <label><input type="checkbox" name="sandbox" id="allow-popups" value="allow-popups" /> Allow popups</label> 
 
     <label><input type="checkbox" name="sandbox" id="allow-same-origin" value="allow-same-origin" /> Allow same origin</label> 
 
     <label><input type="checkbox" name="sandbox" id="allow-scripts" value="allow-scripts" /> Allow scripts</label> 
 
     <label><input type="checkbox" name="sandbox" id="allow-top-navigaton" value="allow-top-navigation" /> Allow top navigation</label> 
 
     <br /> 
 
     <input type="text" id="wrap" style="width: 88%;" placeholder="https://www.example.com" name="url" /> 
 
     <input style="width: 8%;" type="button" value="Wrap" onclick="wrapWebsiteInBubble(); return false;" /> 
 
    </form> 
 
    <iframe id="bubble" name="bubble" src="" style="height: 100%; width: 100%"></iframe> 
 
</body> 
 
</html>

下面是更改的列表：

將<title>在同一行。
修復src屬性試圖訪問提交按鈕而不是輸入。
我也從輸入中刪除了ID，改爲將其改爲具有name屬性。
在標籤標籤中包裝輸入，這意味着您可以單擊每個複選框旁邊的名稱來選擇它，而不必單擊小框。在我看來，這只是更好的用戶體驗（UX）。
連接複選框並將它們添加到browserFrame
這涉及訪問您爲每個輸入設置的ID。然後我檢查是否已經打勾（這就是checked屬性），如果屬實，它會將它們添加到字符串中。
注意：，我沒有對if語句執行=== true檢查，因爲checked屬性總是返回一個布爾值。

理想情況下，最好不要爲每個輸入設置ID。相反，訪問該名稱然後選擇具有複選框類型的所有輸入並遍歷這些輸入會更好。

function wrapWebsiteInBubble() { 
    var browserFrame = document.getElementById("bubble"); 
    browserFrame.src = document.getElementsByName("url")[0].value; 

    // get which checkboxes are checked 
    var sandbox = ""; 
    var checkboxes = document.getElementsByName("sandbox"); 

    for (var i = 0; i < checkboxes.length; i++) { 
     if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) { 
      sandbox += checkboxes[i].value + " "; 
     } 
    } 

    browserFrame.sandbox = sandbox; 
}

來源

2017-10-10 22:16:00 JustCarty

您需要爲複選框中的單擊事件添加一個函數。在這個函數中，您應該獲得複選框的值，並從iframe的沙盒屬性中添加/刪除字符串。

window.onload = function(){ 
    // Grab elements 
    var iframe = document.getElementById('bubbles'); 
    var input = document.getElementById('allow-forms'); 

    // Add click event 
    input.addEventListener('click', toggleForms); 

    function toggleForms() { 
     // Get value of checkbox 
     var value = input.checked; 
     var sandboxAttr = iframe.getAttribute('sandbox'); 

     if(value) { 
     // Add 'allow-forms' 
     } else { 
     // Remove 'allow-forms' 
     } 
    } 
}

P.S.您可能需要將JavaScript代碼封裝到window.onload函數中，以確保在您的JS運行之前DOM已加載。或者，您可以在結束<body>標記後添加腳本標記。

來源

2017-10-10 22:21:38

這不會將所有其他複選框添加到屬性...？它只添加'allow-forms'，即使那樣你也不會顯示代碼。這是一個沒有經驗的人，這個解決方案似乎有點過分。 – JustCarty

這是故意的。我沒有意識到你的技能水平，並且認爲你需要幫助來找出進入的方向。我沒有時間爲你寫出所有的代碼。這意味着我將使用的邏輯的一個例子。有很多資源可以找出JS語法。我更喜歡[MDN]（https://developer.mozilla.org/en-US/docs/Web/JavaScript）。或者你可以查看[jQuery]（https://jquery.com/），這對初學者很有用。 –

我不是OP ......我只是在說，你並沒有真正「回答」這個問題本身。您沒有指定這隻會添加一個輸入。有點模糊很好;只要在你的回答中清楚你在哪些地方是模糊的，以及下一步應該去哪裏。操作程序在他的第一句話中提到了「這裏的新手總數」，這表明了他的技術黯淡。 – JustCarty

如何根據複選框輸入更改iframe屬性？

回答

相關問題