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

Question

首先，我很抱歉我的代码太糟糕了。完全是新手。

为了好玩，我整理了一个基本网站，让您可以在 sandboxed iframe 中查看另一个网站。到目前为止，我所拥有的是从我在 Internet 上找到的代码和我自己对 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，而是将它们更改为具有名称属性。
在 label 标记中包装输入，这意味着您可以单击每个复选框旁边的名称 select 而不必单击小框。在我看来，这只是更好的用户体验 (UX)。
连接复选框并将它们添加到 browserFrame
这涉及访问您为每个输入设置的 ID。然后我检查它们是否被勾选（即 checked 属性是什么），如果为真，它将把它们添加到一个字符串中。
注意： 我没有对 if 语句进行 === true 检查，因为检查属性 returns 无论如何都是布尔值。

理想情况下，最好不要为每个输入设置 ID。相反，访问名称然后 select 所有具有复选框类型的输入并迭代这些输入会更好。

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 的沙盒属性中获取复选框的值和 add/remove 字符串。

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 函数中，以确保 DOM 在您的 JS 运行之前已加载。或者您可以在结束 <body> 标记之后添加脚本标记。

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

How do I change iframe attributes based on checkbox inputs?

html

javascript

iframe

sandbox