页面总是刷新（浏览器中的标签总是显示活动圆圈），是因为我使用了iframe吗？

Question

新出现的问题：

同样的代码，但是我发现每次刷新这个页面，浏览器中的标签总是显示活跃的圈子，这是怎么回事，谢谢！我使用 iframe，但我在 Whosebug 中搜索并且有类似的问题，他使用 js 生成 iframe，但我在下面的代码中这样做了。我只是没有成功

旧问题已解决：我的问题集中在以下几行：

textarea.style.color = '#C5C8C6'; //textarea.style.color = rightL.dataset.brown; //甚至这也行不通：textarea.style.color = rightL.getAttribute('data-brown');`

当我使用

`textarea.style.color = '#C5C8C6',

它有效，但是当我使用 html5 方式时：

//textarea.style.color = rightL.dataset.brown;`

它没有用，我不知道为什么，请帮助，thanks.And我正在使用 crome 浏览器。

以上全部代码：

//HTML

        <div class="grid_section second_grid">
        <div class="tabs_section" >
            <ul class="tabs_section_main_header">
                <li class="component_tab active">{{'Untitled'}}</li>
                <li class="component_tab active rightL" data-white = 'rgb(157, 190, 140)'>乳白</li>
                <li class="component_tab active rightR" data-brown = '#C5C8C6'>舒棕</li>
            </ul>

            <ul class="tabs_section_main_content">
                <li class="component_tab_content">
                    <textarea id="textarea">@if(isset($code)) {{$code}} @endif</textarea>
                </li>
            </ul>
        </div>
    </div>

//JS

(function(){


        //generate iframe using js before any js code      
        function createIframe(){
          var i = document.createElement("iframe");
          i.id = "iFrame";
          i.contentEditable = "true";
          document.getElementsByClassName("iframe")[0].appendChild(i); 
        };

        createIframe();


         //all the vars
         var iframeOuterDiv = document.getElementsByClassName('iframe')[0];
          var iFrame = document.getElementById("iFrame");
         var iframeContent = iFrame.contentWindow;
         var textarea = document.getElementById("textarea");

          var body = document.getElementsByClassName('playCode')[0];
         var playIcon = document.getElementsByClassName('play')[0];
         var editMode = document.getElementsByClassName('editMode')[0];
         var instantIcon = document.getElementsByClassName('instant')[0];
         var rightL = document.getElementsByClassName('rightL')[0];
         var rightR = document.getElementsByClassName('rightR')[0];



         //show html code
          runCode.count = 0;
          function runCode() {  

                   if(textarea.value=="" && runCode.count==0){  
                     iframeContent.document.writeln('请输入要运行的代码');  
                     runCode.count++;

                     return false;
                   }

                   iframeContent.document.open('text/html', 'replace');  
                   iframeContent.document.writeln(textarea.value);  
                   iframeContent.document.close();  


          }

          runCode();          


//addeventlistener code, first Check for browser support of event handling capability
function addEve(target,myAction){
   if (window.addEventListener){

                 if(myAction === 'mouseover'){

                       target.addEventListener(myAction, function(){
                          body.classList.add('action');
                      }, false);       

                 }else if(myAction === 'click'){

                      if(target === editMode){
                             editMode.addEventListener(myAction, function(e){
                              e.preventDefault();
                              body.classList.toggle('action');
                            },false);                        
                      }else if(target === playIcon){
                          playIcon.addEventListener(myAction, function(e){
                            e.preventDefault();
                            runCode();

                          },false);                        
                      }else if(target === instantIcon){
                              instantIcon.addEventListener(myAction, function(e){
                              e.preventDefault();

                              textarea.addEventListener('input', function(){
                                  runCode();
                              });



                              },false);                         
                      }else if(target === rightR){



                                rightR.addEventListener(myAction, function(e){
                                  e.preventDefault();
                                  textarea.style.color = 'rgb(157, 190, 140)';
                               //textarea.style.color = rightL.dataset.white;`
                              //or even this did not work: textarea.style.color =  rightL.getAttribute('data-white');`
                                });





                       }else if(target === rightL){
                                 rightL.addEventListener(myAction, function(e){
                                  e.preventDefault();
                                  textarea.style.color = '#C5C8C6';
                                  // rightL.getAttribute('data-brown');
                                });                              
                       }


                    }









  }else if(window.attachEvent){

            if(myAction === 'mouseover'){

                     target.attachEvent('on' + myAction,  function(){
                          body.classList.add('action');
                      }, false); 

            }else if(myAction === 'click'){

                      playIcon.attachEvent('on' + myAction, function(e){
                        e.preventDefault();
                        runCode();
                        //playIcon.style.color = 'red';
                      });
                      editMode.attachEvent('on' + myAction, function(e){
                        e.preventDefault();
                        body.classList.toggle('action');
                      });            

            }

  }


}

addEve(editMode, 'click');
addEve(playIcon, 'click');
addEve(iFrame,'mouseover');
addEve(instantIcon, 'click');
addEve(rightL, 'click');
addEve(rightR, 'click');


           }());

Answer 1

您的代码似乎工作正常。混乱似乎围绕 rightL 和 rightR 和 data-white 和 [=13 的命名=]数据棕色。如果您将 rightL 更改为 rightR，它对我有用。所以下面这两个都有效...

rightR.getAttribute('data-brown')
rightL.getAttribute('data-white')

页面总是刷新（浏览器中的标签总是显示活动圆圈），是因为我使用了iframe吗？

page always refreshing(the tag in the brower always show the active circle),is that because i use iframe?

javascript

html

getattribute