Получить имя класса элемента внутри фрейма, нажав на нее

В короткое время, я имею в iframe, что загрузить форму локальной страницы HTML и хочет получить доступ к элементу этой страницы by click on them, таким как all type of inputs, dropdown list, table и так далее.
Получить имя класса элемента внутри фрейма, нажав на нее

Это HTML-код, который внутри IFrame тега:

<!DOCTYPE html> 
<html id="bootbody"> 
    <head> 
     <title>test2</title> 
     <link href='bootstrap.min.css' type='text/css' rel='stylesheet' /> 
     <style> 
      @media only screen and (max-width: 767px) and (min-width: 0) { 
      .panel { 
      height: auto !important; 
      } 
      } 
     </style> 
    </head> 
    <body > 
     <div id="testttt" class='container text-right'> 
      <div class='row'> 
       <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:605px' id='16'> 
        <div class='panel-heading text-right row'>گروه 1</div> 
        <div class='panel-body'> 
         <div class='row'> 
          <div class='col-xs-12 pull-right col-sm-6' style='height:px' id='G1'> 
           <div class='row'> 
            <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='12'> 
             <div class='panel-heading text-right row'>گروه 2</div> 
             <div class='panel-body'> 
              <div class='row'> 
               <div class='col-xs-12 pull-right col-sm-12' style='height:px' id='G1'> 
                <div class='row'> 
                 <div class='col-xs-12 col-sm-6 pull-right text-right'> 
                  <div class='row'> 
                   <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 1</span></div> 
                   <div class='col-xs-12 col-sm-6'><input id='layout2' type='text' class='form-control form-control-sm' /></div> 
                  </div> 
                 </div> 
                 <div class='col-xs-12 col-sm-6 pull-right text-right'> 
                  <div class='row'> 
                   <div class='col-xs-12 col-sm-6 pull-right'><span>عنوان</span></div> 
                   <div class='col-xs-12 col-sm-6'><input id='layout17' type='text' class='form-control form-control-sm' /></div> 
                  </div> 
                 </div> 
                </div> 
               </div> 
               <div class='col-xs-12 col-sm-12 pull-right text-right'> 
                <div class='row'> 
                 <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 2</span></div> 
                 <div class='col-xs-12 col-sm-6'><input id='layout3' class='form-control form-control-sm' type='text' /></div> 
                </div> 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='13'> 
             <div class='panel-heading text-right row'>گروه 3</div> 
             <div class='panel-body'> 
              <div class='row'> 
               <div class='col-xs-12 col-sm-12 pull-right text-right'><span>چک باکس 1</span><input id='layout7' type='checkbox'></input></div> 
               <div class='col-xs-12 col-sm-12 pull-right text-right'><span>چک باکس 2</span><input id='layout8' type='checkbox'></input></div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class='col-xs-12 pull-right col-sm-6' style='height:NaNpx' id='G1'> 
           <div class='row'> 
            <div class='panel panel-default pull-right col-xs-12 col-sm-12' style='height:200px' id='3'> 
             <div class='panel-heading text-right row'>گروه</div> 
             <div class='panel-body'> 
              <div class='row'> 
               <div class='col-xs-12 col-sm-12'> 
                <div class='row'> 
                 <div class='col-xs-12 col-sm-6 pull-right'><span>کومبو1</span></div> 
                 <div class='col-xs-12 col-sm-6'><select id='layout11' class='form-control form-control-sm'></select></div> 
                </div> 
               </div> 
               <div class='col-xs-12 col-sm-12'><button style='height:30px;width:150px' id='btnUpdate_2' class='btn btn-default text-center'>ذخیره 2</button></div> 
              </div> 
             </div> 
            </div> 
            <div class='col-xs-12 col-sm-12 pull-right text-right'> 
             <div class='row'> 
              <div class='col-xs-12 col-sm-6 pull-right'><span>تکست 3</span></div> 
              <div class='col-xs-12 col-sm-6'><input id='layout12' class='form-control form-control-sm' type='text' /></div> 
             </div> 
            </div> 
            <div class='col-xs-12 col-sm-12'><button style='height:30px;width:150px' id='btnUpdate_1' class='btn btn-default text-center'>ذخیره 1</button></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

и я загрузить его в asp.net веб-форму:

<div id="frameWrapper"> 
        <iframe id="frame" src="../HtmlHolder/TEST2.html">[ممکن است بدلیل تنظیمات پیکر بندی مرورگرتان ،قادر به مشاهده ی نمایشگر موبایل نباشید.لطفا مرورگر خود را تغییر دهید.] 
        </iframe> 
       </div>

это код сценария для доступа к элементу внутри iframe:

<script> 
     $(document).ready(function() { 
      var frm = $("#frame").get(0); 
      var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document);//here is your document object 
      var bdy = doc.body; 
      alert(bdy); 

     }); 
    </script>

Я использую код выше, чтобы найти тело iframe, но не могу получить доступ к его элементу ...

Я google, но нашел другую вещь, как find element by class name, или найти specific element, что не используется для меня. Как я могу это сделать? большое спасибо.

NOTE: I read an HTML code from DB and then upload it into a folder on my host and then view it in ifram tag.

источник

2016-04-27 Hamid Talebi

Post код, что вы пробовали? –

вы можете попробовать что-то вроде этого '$ ('# iframe'). Content(). Find (" html "). Html();' затем сделайте его объектом jquery и найдите класс – guradio

@JohnR, вопрос обновлен –

Попробуйте

jQuery(jQuery('[id="frame"]')[0].contentWindow.document.body).on('click', '*', function() { 
    console.log("triggered !!"); 
    console.log(this.className); // class of element clicked 
});

источник

2016-04-27 06:11:05

Я видел эту ошибку: TypeError: jQuery (...) [0] .contentWindow is undefined.why !!! –

Мой плохой, у меня был идентификатор обложки, а не идентификатор кадра из вашей разметки. –

Работало, но у меня проблема. Этот код возвращает ЭТО класс элемента с именем класса PARENT. Мне нужно это как «(e.target) .classname «У тебя есть идея? –

Вы можете попробовать этот способ.

$(document).ready(function() { 
    var frm = $("#frame").get(0); 
    var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document); //here is your document object 
    var bdy = doc.body; 
    $(bdy).on("click", "*", function (e) { 
     console.log($(e.target).attr("class"));//To get class name 
    }); 
});

источник

2016-04-27 06:45:51

спасибо @John R, ваш код имеет ту же проблему, что и весь класс, а не это! –

Можете ли вы попробовать это 'e.target.className'? –

Я попробовал, но у него есть превью проблема. Я редактирую решение Марка Шульфейса, и он отлично работал. Большое вам спасибо за вашу помощь. –

Если кто-то возникают проблемы с этими решениями, я был в состоянии заставить его работать с раствором John R, но вместо того, чтобы использовать $ (документ) .ready я должен был слушать нагрузки IFrame.

Как это:

$("#frame").on('load', function(){ 
    var frm = $("#frame").get(0); 
    var doc = (frm.contentDocument ? frm.contentDocument : frm.contentWindow.document); //here is your document object 
    var bdy = doc.body; 

    $(bdy).on("click", "*", function (e) { 
     console.log($(e.target).attr("class"));//To get class name 
    }); 
});

источник

2017-03-09 18:07:45 marcelogil

Получить имя класса элемента внутри фрейма, нажав на нее

ответ

Смежные вопросы