チェックボックスの入力に基づいて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>

P.S. 私のコードを良くするために間違いないことはありますか？

出典

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を削除し、代わりに名前属性を持つように変更しました。
ラベルタグのラップされた入力は、小さなボックスをクリックするのではなく、各チェックボックスの横にある名前をクリックして選択できることを意味します。私の意見では、これはユーザーエクスペリエンス（UX）のほうが優れています。
チェックボックスを接続して追加しましたbrowserFrame
これは、入力ごとに設定したIDにアクセスすることを伴います。私は彼らが（それはcheckedプロパティが何であるか）、それが文字列にそれらを追加する場合は真であれば、彼らがチェックされているかどうかを確認した。
注：私は=== 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のサンドボックス属性から文字列を追加/削除する必要があります。

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関数でjavascriptコードをラップして、JSが実行される前にDOMがロードされていることを確認してください。または、<body>タグの後にscriptタグを置くこともできます。

出典

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ではありません...私はあなたが実際に質問に本当に "答え"なかったと言っています。これは入力が1つしか追加されないことを指定していません。やや曖昧なことは大丈夫です。答えが漠然としているところで、OPがどこに行くべきか明確にしてください。 OPは彼の最初の文章では、彼の不十分なスキルセットの指標だった "ここでは、合計初心者"と述べた。 – JustCarty

チェックボックスの入力に基づいてiframe属性を変更するにはどうすればよいですか？

答えて

関連する問題