Thêm trình xử lý sự kiện nhấp vào iframe

Tôi muốn xử lý sự kiện click trên số iframe với trình xử lý nhận được thông số id của iframe.Thêm trình xử lý sự kiện nhấp vào iframe

Tôi có thể thêm một handler onClick sự kiện thông qua JavaScript như sau và nó hoạt động tốt:

iframe.document.addEventListener('click', clic, false);

Nhưng trong trường hợp này tôi không thể vượt qua một tham số để clic(). Tôi đã cố gắng in this.id trong clic() nhưng không có kết quả.

onClick Thuộc tính HTML không hoạt động chút nào, trình xử lý không được gọi.

<html> 
<head> 
<script type="text/javascript"> 
function def() { 
    myFrame.document.designMode = 'on'; 
} 
function clic(id) { 
    alert(id); 
} 
</script> 
</head> 
<body onLoad="def()"> 
<iframe id="myFrame" border="0" onClick="clic(this.id)"></iframe> 
</body></html>

Nguồn

2011-06-23 samach

như bình luận bởi [deepi] (http) : //stackoverflow.com/users/787076/deepi) trong một câu trả lời: 'mã của bạn (những gì bạn đưa lên đầu) đang hoạt động tốt. Nhưng nó hoạt động khi bạn bấm chính xác trên đường viền không nằm trong hộp bên cạnh –

bạn có thể sử dụng đóng cửa để vượt qua các thông số:

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);

Tuy nhiên, tôi khuyên bạn nên sử dụng một approac tốt hơn h để truy cập vào khung của bạn (tôi chỉ có thể giả định rằng bạn đang sử dụng cách DOM0 để truy cập cửa sổ khung theo tên của họ - một thứ chỉ được giữ lại để tương thích ngược):

document.getElementById("myFrame").contentDocument.addEventListener(...);

Nguồn

2011-06-23 10:32:43

cảm ơn wladimir .... u đã giải quyết một nửa prblm của tôi ... nhưng vẫn this.id là nt làm việc. nếu tôi vượt qua "hello world" thì nó sẽ được in nhưng đối với this.id nó nói "undefinied" trong hộp cảnh báo: S – samach

Phải, đó là vì bạn đã thêm người nghe vào tài liệu - và tài liệu không có ID. Bạn có thể muốn thêm nó vào phần tử '' thay vào đó, như trong ví dụ đầu tiên của bạn: 'document.getElementById (" myFrame "). AddEventListener (...);' – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Bạn có thể gán sự kiện đó ngay cả khi iframe từ khác phạm vi? – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="4319274062" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">20<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>iframe không có sự kiện onclick nhưng chúng ta có thể thực hiện điều này bằng cách sử dụng sự kiện onload iframe và javascript như thế này ...</p> <pre><code class="prettyprint-override">function iframeclick() { document.getElementById("theiframe").contentWindow.document.body.onclick = function() { document.getElementById("theiframe").contentWindow.location.reload(); } } <iframe id="theiframe" src="youriframe.html" style="width: 100px; height: 100px;" onload="iframeclick()"></iframe> </code></pre> <p>Tôi hy vọng nó sẽ hữu ích cho bạn ....</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/6452599">Nguồn</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2011-06-23 10:29:53</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">nó chỉ hoạt động nếu trang web hiện tại có cùng giao thức iframe (không hoạt động nếu một là http và số kia là https) – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/2303988/">Alessio</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+3</span></div> <div class="col-lg-11"> <p class="commenttext">Cũng không hoạt động tên miền. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/985454/">Qwerty</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Các vấn đề liên quan</div> <ul class="relative_list"> <li> 1. <a href="http://vi.voidcc.com/question/p-snezphwt-bo.html" target="_blank" title="Thêm trình xử lý sự kiện nhấp chuột vào Pushpin"> Thêm trình xử lý sự kiện nhấp chuột vào Pushpin </a> </li> <li> 2. <a href="http://vi.voidcc.com/question/p-ytteeadk-p.html" target="_blank" title="Xử lý DataGridHyperlinkColumn Nhấp vào Sự kiện"> Xử lý DataGridHyperlinkColumn Nhấp vào Sự kiện </a> </li> <li> 3. <a href="http://vi.voidcc.com/question/p-hnhzruon-m.html" target="_blank" title="JQUERY, Thêm Trình xử lý sự kiện vào các mục trong iFrame?"> JQUERY, Thêm Trình xử lý sự kiện vào các mục trong iFrame? </a> </li> <li> 4. <a href="http://vi.voidcc.com/question/p-gaotbdze-p.html" target="_blank" title="Cách thêm sự kiện nhấp vào iframe với JQuery"> Cách thêm sự kiện nhấp vào iframe với JQuery </a> </li> <li> 5. <a href="http://vi.voidcc.com/question/p-kklsfbhm-bm.html" target="_blank" title="Thêm trình xử lý sự kiện vào main() cho SerialPort"> Thêm trình xử lý sự kiện vào main() cho SerialPort </a> </li> <li> 6. <a href="http://vi.voidcc.com/question/p-vkalpmec-v.html" target="_blank" title="Cách thêm trình xử lý nhấp chuột động vào jeditable"> Cách thêm trình xử lý nhấp chuột động vào jeditable </a> </li> <li> 7. <a href="http://vi.voidcc.com/question/p-wpaxnskm-bq.html" target="_blank" title="Google Maps v3 InfoBox Thêm Trình xử lý Sự kiện"> Google Maps v3 InfoBox Thêm Trình xử lý Sự kiện </a> </li> <li> 8. <a href="http://vi.voidcc.com/question/p-rvvjpldy-w.html" target="_blank" title="Xử lý mục menu Nhấp vào Sự kiện - Android"> Xử lý mục menu Nhấp vào Sự kiện - Android </a> </li> <li> 9. <a href="http://vi.voidcc.com/question/p-gqfqxdhu-r.html" target="_blank" title="thêm sự kiện nhấp vào fullcalendar"> thêm sự kiện nhấp vào fullcalendar </a> </li> <li> 10. <a href="http://vi.voidcc.com/question/p-mhsphzkh-d.html" target="_blank" title="Đính kèm sự kiện trong iframe con vào trình xử lý trong cửa sổ chính"> Đính kèm sự kiện trong iframe con vào trình xử lý trong cửa sổ chính </a> </li> <li> 11. <a href="http://vi.voidcc.com/question/p-ucsrdkyf-x.html" target="_blank" title="Thêm trình xử lý nhấp chuột vào LI bullet"> Thêm trình xử lý nhấp chuột vào LI bullet </a> </li> <li> 12. <a href="http://vi.voidcc.com/question/p-sesetyzj-m.html" target="_blank" title="Thêm trình xử lý sự kiện cho ListView Items_added"> Thêm trình xử lý sự kiện cho ListView Items_added </a> </li> <li> 13. <a href="http://vi.voidcc.com/question/p-wzjwdvuo-c.html" target="_blank" title="Thêm xử lý sự kiện riêng trước xử lý sự kiện khác"> Thêm xử lý sự kiện riêng trước xử lý sự kiện khác </a> </li> <li> 14. <a href="http://vi.voidcc.com/question/p-ycirronp-k.html" target="_blank" title="Thêm và xóa Trình xử lý sự kiện ẩn danh"> Thêm và xóa Trình xử lý sự kiện ẩn danh </a> </li> <li> 15. <a href="http://vi.voidcc.com/question/p-olgjvbtb-p.html" target="_blank" title="cách áp dụng trình xử lý sự kiện nhấp chuột vào hình ảnh trong android"> cách áp dụng trình xử lý sự kiện nhấp chuột vào hình ảnh trong android </a> </li> <li> 16. <a href="http://vi.voidcc.com/question/p-oiqrwoal-p.html" target="_blank" title="chạm vào trình xử lý sự kiện cho UIImageView"> chạm vào trình xử lý sự kiện cho UIImageView </a> </li> <li> 17. <a href="http://vi.voidcc.com/question/p-majfpsfw-y.html" target="_blank" title="Cách thêm trình xử lý sự kiện vào biến cục bộ trong VB.NET"> Cách thêm trình xử lý sự kiện vào biến cục bộ trong VB.NET </a> </li> <li> 18. <a href="http://vi.voidcc.com/question/p-bgmlhqhl-p.html" target="_blank" title="Thêm nhiều trình xử lý sự kiện cho một sự kiện trong XAML?"> Thêm nhiều trình xử lý sự kiện cho một sự kiện trong XAML? </a> </li> <li> 19. <a href="http://vi.voidcc.com/question/p-hdrlfllp-h.html" target="_blank" title="Làm thế nào để đưa trình xử lý sự kiện vào các sự kiện với Unity"> Làm thế nào để đưa trình xử lý sự kiện vào các sự kiện với Unity </a> </li> <li> 20. <a href="http://vi.voidcc.com/question/p-fidhmsfk-k.html" target="_blank" title="cách nhấp hoặc nhấp đúp vào một từ trên trang web để kích hoạt trình xử lý sự kiện?"> cách nhấp hoặc nhấp đúp vào một từ trên trang web để kích hoạt trình xử lý sự kiện? </a> </li> <li> 21. <a href="http://vi.voidcc.com/question/p-nzrqspyo-m.html" target="_blank" title="html5, thêm một trình xử lý sự kiện vào một hình ảnh được vẽ trên canvas"> html5, thêm một trình xử lý sự kiện vào một hình ảnh được vẽ trên canvas </a> </li> <li> 22. <a href="http://vi.voidcc.com/question/p-eerzdqka-u.html" target="_blank" title="Bộ sưu tập thêm trình xử lý sự kiện vào Backbone"> Bộ sưu tập thêm trình xử lý sự kiện vào Backbone </a> </li> <li> 23. <a href="http://vi.voidcc.com/question/p-umjumalo-a.html" target="_blank" title="Thêm một trình xử lý sự kiện vào jqGrid sau khi instantiation"> Thêm một trình xử lý sự kiện vào jqGrid sau khi instantiation </a> </li> <li> 24. <a href="http://vi.voidcc.com/question/p-acgptdqm-bm.html" target="_blank" title="Làm cách nào để thêm trình xử lý sự kiện CSS AnimationEnd vào tiện ích GWT?"> Làm cách nào để thêm trình xử lý sự kiện CSS AnimationEnd vào tiện ích GWT? </a> </li> <li> 25. <a href="http://vi.voidcc.com/question/p-wzcluudr-q.html" target="_blank" title="C#: gọi phương thức xử lý sự kiện nút mà không thực sự nhấp vào nút"> C#: gọi phương thức xử lý sự kiện nút mà không thực sự nhấp vào nút </a> </li> <li> 26. <a href="http://vi.voidcc.com/question/p-porecjrj-s.html" target="_blank" title="Làm mới trình xử lý sự kiện Javascript"> Làm mới trình xử lý sự kiện Javascript </a> </li> <li> 27. <a href="http://vi.voidcc.com/question/p-xdnvaqnr-e.html" target="_blank" title="jQuery "sau khi nhấp vào" sự kiện"> jQuery "sau khi nhấp vào" sự kiện </a> </li> <li> 28. <a href="http://vi.voidcc.com/question/p-ocllxyfr-h.html" target="_blank" title="Sự khác biệt giữa Trình xử lý sự kiện & Trình xử lý sự kiện trong Java là gì?"> Sự khác biệt giữa Trình xử lý sự kiện & Trình xử lý sự kiện trong Java là gì? </a> </li> <li> 29. <a href="http://vi.voidcc.com/question/p-zvywyuvf-b.html" target="_blank" title="Sự khác biệt, nếu có, giữa trình xử lý sự kiện và trình xử lý sự kiện?"> Sự khác biệt, nếu có, giữa trình xử lý sự kiện và trình xử lý sự kiện? </a> </li> <li> 30. <a href="http://vi.voidcc.com/question/p-yfkwtgyo-bp.html" target="_blank" title="Nhấp vào sự kiện trên TinyMCE 4.0"> Nhấp vào sự kiện trên TinyMCE 4.0 </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422912"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Câu hỏi mới nhất </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://vi.voidcc.com/question/p-kvcnfose-bq.html" target="_blank" title="mùa xuân dữ liệu: rollback giao dịch trên retry"> mùa xuân dữ liệu: rollback giao dịch trên retry </a> </li> <li class="side_article_list_item"> 2. <a href="http://vi.voidcc.com/question/p-dwfgmqzf-bs.html" target="_blank" title="Tensorflow ResourceExhaustedError sau khi lô hàng đầu tiên"> Tensorflow ResourceExhaustedError sau khi lô hàng đầu tiên </a> </li> <li class="side_article_list_item"> 3. <a href="http://vi.voidcc.com/question/p-ujdpsjun-by.html" target="_blank" title="Cộng tác: Tôi có thể truy cập vào thư mục và tệp trên Google Drive của mình không?"> Cộng tác: Tôi có thể truy cập vào thư mục và tệp trên Google Drive của mình không? </a> </li> <li class="side_article_list_item"> 4. <a href="http://vi.voidcc.com/question/p-xidabokn-ca.html" target="_blank" title="IntegrityError: giá trị null trong cột "id" cho tất cả các kiểu/trường có ForeignKey sau khi khôi phục postgres từ dump"> IntegrityError: giá trị null trong cột "id" cho tất cả các kiểu/trường có ForeignKey sau khi khôi phục postgres từ dump </a> </li> <li class="side_article_list_item"> 5. <a href="http://vi.voidcc.com/question/p-yeshlwqp-by.html" target="_blank" title="Ít "a:" cho/có nghĩa là gì trong GoLand?"> Ít "a:" cho/có nghĩa là gì trong GoLand? </a> </li> <li class="side_article_list_item"> 6. <a href="http://vi.voidcc.com/question/p-skvjexil-bx.html" target="_blank" title="`*` được ghi lại ở đâu trong lưu lượng?"> `*` được ghi lại ở đâu trong lưu lượng? </a> </li> <li class="side_article_list_item"> 7. <a href="http://vi.voidcc.com/question/p-ddnfokqw-bt.html" target="_blank" title="Kiểm tra xem một mẫu chuyên môn của một phương pháp tồn tại"> Kiểm tra xem một mẫu chuyên môn của một phương pháp tồn tại </a> </li> <li class="side_article_list_item"> 8. <a href="http://vi.voidcc.com/question/p-gwracflk-bv.html" target="_blank" title="java kích thước mảng đối tượng"> java kích thước mảng đối tượng </a> </li> <li class="side_article_list_item"> 9. <a href="http://vi.voidcc.com/question/p-olgjjxnf-by.html" target="_blank" title="Làm thế nào để đặt một bản đồ geom_sf sản xuất trên đỉnh của một raster ggmap sản xuất"> Làm thế nào để đặt một bản đồ geom_sf sản xuất trên đỉnh của một raster ggmap sản xuất </a> </li> <li class="side_article_list_item"> 10. <a href="http://vi.voidcc.com/question/p-vmfbktkp-bz.html" target="_blank" title="Trong ReactNative, phương pháp Async Await nào tốt hơn trong hai phương pháp này và tại sao?"> Trong ReactNative, phương pháp Async Await nào tốt hơn trong hai phương pháp này và tại sao? </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Các vấn đề liên quan</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://vi.voidcc.com/question/p-snezphwt-bo.html" target="_blank" title="Thêm trình xử lý sự kiện nhấp chuột vào Pushpin"> Thêm trình xử lý sự kiện nhấp chuột vào Pushpin </a> </li> <li class="side_article_list_item"> 2. <a href="http://vi.voidcc.com/question/p-ytteeadk-p.html" target="_blank" title="Xử lý DataGridHyperlinkColumn Nhấp vào Sự kiện"> Xử lý DataGridHyperlinkColumn Nhấp vào Sự kiện </a> </li> <li class="side_article_list_item"> 3. <a href="http://vi.voidcc.com/question/p-hnhzruon-m.html" target="_blank" title="JQUERY, Thêm Trình xử lý sự kiện vào các mục trong iFrame?"> JQUERY, Thêm Trình xử lý sự kiện vào các mục trong iFrame? </a> </li> <li class="side_article_list_item"> 4. <a href="http://vi.voidcc.com/question/p-gaotbdze-p.html" target="_blank" title="Cách thêm sự kiện nhấp vào iframe với JQuery"> Cách thêm sự kiện nhấp vào iframe với JQuery </a> </li> <li class="side_article_list_item"> 5. <a href="http://vi.voidcc.com/question/p-kklsfbhm-bm.html" target="_blank" title="Thêm trình xử lý sự kiện vào main() cho SerialPort"> Thêm trình xử lý sự kiện vào main() cho SerialPort </a> </li> <li class="side_article_list_item"> 6. <a href="http://vi.voidcc.com/question/p-vkalpmec-v.html" target="_blank" title="Cách thêm trình xử lý nhấp chuột động vào jeditable"> Cách thêm trình xử lý nhấp chuột động vào jeditable </a> </li> <li class="side_article_list_item"> 7. <a href="http://vi.voidcc.com/question/p-wpaxnskm-bq.html" target="_blank" title="Google Maps v3 InfoBox Thêm Trình xử lý Sự kiện"> Google Maps v3 InfoBox Thêm Trình xử lý Sự kiện </a> </li> <li class="side_article_list_item"> 8. <a href="http://vi.voidcc.com/question/p-rvvjpldy-w.html" target="_blank" title="Xử lý mục menu Nhấp vào Sự kiện - Android"> Xử lý mục menu Nhấp vào Sự kiện - Android </a> </li> <li class="side_article_list_item"> 9. <a href="http://vi.voidcc.com/question/p-gqfqxdhu-r.html" target="_blank" title="thêm sự kiện nhấp vào fullcalendar"> thêm sự kiện nhấp vào fullcalendar </a> </li> <li class="side_article_list_item"> 10. <a href="http://vi.voidcc.com/question/p-mhsphzkh-d.html" target="_blank" title="Đính kèm sự kiện trong iframe con vào trình xử lý trong cửa sổ chính"> Đính kèm sự kiện trong iframe con vào trình xử lý trong cửa sổ chính </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://vi.voidcc.com/contact">Liên lạc với chúng tôi</a></li> <li>© 2020 VI.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

Thêm trình xử lý sự kiện nhấp vào iframe

Trả lời