Question

首先，我很抱歉我的代码太可怕了。这里总新手。

为了好玩，我正在整理一个基本网站，让您在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>

P.S。我有什么办法可以让我的代码变得更好吗？

Answer 1

我修复了代码。

<!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，而是将它们更改为具有名称属性。
在标签标签中包含输入，这意味着您可以单击每个复选框旁边的名称来选择它，而不必单击小方框。在我看来，这只是更好的用户体验（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;
}

Answer 2

您需要在复选框上为点击事件添加功能。在此函数中，您应该获取复选框的值，并从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>标记后获得脚本标记。

如何根据复选框输入更改iframe属性？

2 个答案: