체크 박스 입력을 기반으로 iframe 속성을 변경하려면 어떻게해야합니까?

먼저, 제 코드는 너무 끔찍합니다. 총 초보자는 여기에.체크 박스 입력을 기반으로 iframe 속성을 변경하려면 어떻게해야합니까?

재미 있기 때문에 sandboxed iframe에있는 다른 웹 사이트를 볼 수있는 기본 웹 사이트를 구성하고 있습니다. 내가 지금까지 가지고있는 것은 인터넷에서 발견 한 코드와 html에 대한 내 자신의 믿을 수 없을만큼 기본적인 지식에서 급하게 해싱되었습니다. 내가 갇혀 있지만 샌드 박스 기능을 구현하는 방법입니다.

내가 찾고있는 것은 내 사이트에 포함 된 체크 박스를 사용하여 샌드 박스 오버라이드를 설정하거나 해제하는 것입니다. 나는 그것을하기에 충분한 자바 스크립트를 모른다. 어떤 도움을 주시면 감사하겠습니다.

<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. 내 코드를 개선하기 위해 반드시해야 할 일이 있습니까?

출처

2017-10-10 Jacob Grassi

_P.S. 코드를 더 잘 만들려면 반드시해야 할 일이 있습니까?_ 변경된 내용과 이유에 대한 설명과 함께 업데이트 된 답변을 참조하십시오. – JustCarty

나는 코드를 수정했다.

가 같은 줄에 <title>을 넣어 : 여기

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

는 변화의 목록입니다.

src 속성이 입력이 아니라 제출 버튼에 액세스하는 중임을 수정했습니다.
또한 입력에서 ID를 제거하고 이름 속성을 갖도록 변경했습니다.
레이블 태그의 입력을 감 았기 때문에 작은 상자를 클릭하지 않고 각 확인란 옆의 이름을 클릭하여 선택할 수 있습니다. 그것은 내 의견으로는 더 나은 사용자 경험 (UX)입니다.
확인란을 연결하고 browserFrame에 입력하십시오.
각 입력에 대해 설정 한 ID에 액세스해야합니다. 그 다음에 체크 된 것이 있는지 확인했습니다 (즉, checked 속성입니다). 참이면 문자열에 추가합니다.
참고 : 확인 된 속성이 어쨌든 부울 값을 반환하므로 if 문에서 === true 검사를 수행하지 않았 음을 알리는 참고 :

이상적으로는 입력마다 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의 sandbox 특성에서 문자열을 추가/제거해야합니다.

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. 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가 아니다 ... 나는 그저 질문에 정말로 "대답"하지 않았다고 말하고 있었다. 이 옵션은 하나의 입력 만 추가한다고 지정하지 않았습니다. 다소 모호한 것은 괜찮습니다. 대답이 모호한 곳과 다음에 OP가 있어야하는 곳을 명확히 밝히십시오. OP는 그의 첫 번째 문장에서 "총 초보자"라고 표현했는데, 이것은 자신의 실력이 약한 기술을 나타냅니다. – JustCarty

체크 박스 입력을 기반으로 iframe 속성을 변경하려면 어떻게해야합니까?

답변

관련 문제