2

I have been looking up javascript/iFrame posts on StackOverflow for about 45 minutes and I've gathered some great resources, however I cannot get the javascript to function correctly inside an iFrame. I've attached two screenshots from a website that I have iFramed inside my own. The iFrame pops up with a menu open that takes up 60% of the frame. I'd like to add a class to the menu to close it automatically upon my page loading. I've got the right JS, I think, but I can't get it to function. The class will not add at all.

Menu opened Menu closed This is my iFrame and Javascript to change the div ID to "expanded" class. I know it sounds silly, but expanded is the class name for the closed menu. Any help would be appreciated! Thanks.

<iframe src="http://dayzdb.com/map#2.065.045" style="width:500px; height:300px;" id="dayzdb"></iframe>

      <script>$("#dayzdb").contents().find("#mapContainer").addClass("expanded")</script>

In lieu of posting the HTML (since it's long) I have posted the website link where you can inspect element on the navbar to see it.

http://dayzdb.com/map

David Washburn
  • 127
  • 9
  • I don't think you need `.contents()` if you're doing `.find()` right after, I think `.find()` is sufficient. Also, could you post some of the HTML that's contained within the iFrame? It might help us figure out why it's not selecting correctly. – xCRKx TyPHooN Apr 26 '16 at 19:53
  • Is the `iframe` from the same domain?? If not, you're subject to the [same origin policy](https://en.wikipedia.org/wiki/Same-origin_policy). – Steven B. Apr 26 '16 at 19:59
  • Great question, I''ll attach the HTML too! And I will also try and remove contents and see if that works! – David Washburn Apr 26 '16 at 19:59
  • 1
    @DavidWashburn you cannot run scripts against the content of an `iframe` that is from a different domain (url/website/web address) than the one you are building. For instance, if your website is www.example.com then you will not be able to do what you want because of the link that I posted in the above comment. – Steven B. Apr 26 '16 at 20:09
  • @lamelemon, this is sad news but also very helpful to know. Have you heard of any other legal methods for doing this? If not, I still do appreciate the helpful insight. – David Washburn Apr 26 '16 at 20:38
  • In the past, the only way to circumvent this was to set up a proxy off of your website or to set the domain in your javascript to that of the `iframe`. I'm not sure that these methods still work but here is a [thread](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) on it – Steven B. Apr 26 '16 at 21:25
  • If you'd like to add an answer I'll solve it out, thanks for the help. My next goal will now be seeing if I can push the content inside the iframe over using margins to push the menu away. – David Washburn Apr 26 '16 at 22:47

1 Answers1

2

Are you using the same domain in your page and your iframe? Don't forget the cross-domain policy, otherwise it won't work! If you have control over both sites, you can use the postMessage method to transfer data across different domains. A very basic example:

// framed.htm:
window.onmessage = function(event) {
    event.source.postMessage(document.body.innerHTML, event.origin);
};

// Main page:
window.onmessage = function(event) {
    alert(event.data);
};

// Trigger:
// <iframe id="myframe" src="framed.htm"></iframe>
document.getElementById('myframe').contentWindow.postMessage('','*');
Marvin Medeiros
  • 202
  • 4
  • 22