Cannot Select element inside iframe in Jquery?

Question

From reference of this thread Selecting an element in iFrame jQuery, I thought I was doing correctly to select class .toolbar inside iframe #iframe_toolbar, yet it does not select any element at all.

strict_toolbar_top.html

$(document).ready(function(){

  console.log($('#iframe_toolbar').contents().find('ul.toolbar'));

  $(document).on('scroll',function(){
 var top = $(window).scrollTop();

 $('#iframe_toolbar').contents().find('ul.toolbar').css({
   'margin-top':top,
 })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="height: 900px;">
<iframe id='iframe_toolbar' src="toolbar.html" frameborder="0" width="100%" height="800px"></iframe>
</div>

toolbar.html

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
}

li {
 float: left;
}

li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover:not(.active) {
 background-color: #111;
}

.active {
 background-color: #4CAF50;
}

<ul class="toolbar" style="position: fixed;width:100%;">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
<div class="content" style="height: 30px;">

</div>

console.log($('#iframe_toolbar').contents().find('ul.toolbar')); return an empty object as this:

What is wrong with my jquery script?

I think this is disabled due to security reasons. https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — BobtheMagicMoose, Aug 17 '18 at 18:47
@BobtheMagicMoose, is it a browser act? I'm testing with chromium browser, how can I check it and solve ? I don't see any sign of security warning showing up. Thanks — Houy Narun, Aug 17 '18 at 18:52
I think what you are doing is subject to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy). This should be the reason why you are getting permission denied type errors. — saAction, Aug 17 '18 at 18:53
@HouyNarun Yes, it is the browser 'sandboxing' scripts based on where they come from. This prevents me from having an iFrame with "gmail.com" and then using the iframe to scrub your email. — BobtheMagicMoose, Aug 17 '18 at 18:57
It's unlikely to be the SOP interfering as the content of the iframe is on the local domain. @OP check the console for errors. — Rory McCrossan, Aug 17 '18 at 18:57
@RoryMcCrossan, supported your thought, before that I used to include jquery script from google cdn inside iframe and browser alert me of across origin waring, then moved jquery script to the parent element of iframe. — Houy Narun, Aug 17 '18 at 19:01
I don't see any problem with this code. If you use your iframe HTML in the same domain, it should work. I even made a plunker to support this: https://next.plnkr.co/edit/ONZv8N99Olo8YNlO?open=lib%2Fscript.js — Ziv Weissman, Aug 17 '18 at 20:24
@ZivWeissman, From plunker, it is working fine. However, I tested on my local pc, it still does not work, the problem showed on window scroll event, `jquery.min.js:2 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a cross-origin frame.`, it's jquery script cnd. I wondering I already downloaded it and save on my pc and call from my pc already, and it is in the parent iframe not inside iframe itself, why it is still a problem? Thanks — Houy Narun, Aug 18 '18 at 03:41
Yes it is, I don’t know why. It’s would be great if you simulate it on your local pc and check. Thanks :) — Houy Narun, Aug 18 '18 at 12:35
I ran strict_toolbar.html which also include iframe of toolbar.html. I don’t know why, it’s would be great if you could simulate this on your pc and check. Thanks :) — Houy Narun, Aug 18 '18 at 12:38

Cannot Select element inside iframe in Jquery?

0 Answers0