I'm using an Iframe to have an html file work on a homepage when someone clicks on a link. When I use the html file by itself as a webpage, things like multiple key depressions and such work and are accessible. But they aren't when I access the html via an iframe.
Is this even possible?
Edit
Oh, I have a function in my main.html file, which detects key depressions and plays video files based off of key presses (it's a psuedo video game). It uses eventlisteners and objects to detect positions of keys. But again, this doesn't work when I view it in an iframe from some other html page, index.html
First off, if your iframe and parent are on different domains, you're going to have some security issues that you may/may not be able to get around (read Cross-Domain Communication with IFrames).
As for how to access your iframe's events from the parent.
See:
Adding an event listener to an iframe
Add event to iframe body
Adding click event handler to iframe
Adding event handler to an iframe using JQuery
EDIT: Should mention that your question is a bit ambiguous, so I'm kind of shooting in the dark here with this answer.
Related
I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};
I have index page that contains items i want to keep on all the pages. And i have iframe in the middle of the index page, where all the content is shown.
<iframe id="midfr" src="news.html"></iframe>
When clicking on links, content goes to midfr, while website url is always like www.example.com/
Is there a way to have urls like www.example.com/iframe_url/ when going to specified page using iframes? I dont even have a clue on how to do that.
However ive seen some websites that have some constant divs, while main content blinks on visiting links. Although their source code didnt include any iframes..
No, because iframes don't provide any events to the DOM that you can use to change the URL.
Even if your write it as a method to capture and execute the event. You will still not get it. Because it is not allowed.
Iframe won't provide control over any event, untill the code to handle the event is already a part of it.
You can change the Website's URL using History PushState method. But only if you can have an event to do that. Since iframes don't provide you with an event you won't be able to change the URL.
I have made a JS/HTML5 game which is controlled by keyboard, I like to make it embeddable like flash games, but when I embed it inside an iframe it only capture keyboard events when iframe is focused. If user interact with other element on the page iframe will lose focus and the game will not receive events.
How can I make it always capture keyboard events from inside iframe and avoid defaults like flash games? For example using space for firing instead of scrolling, from inside iframe.
Why down vote?
This is one way to do it:
function focus()
{
var iframe = document.getElementById('iframe-element')
iframe.contentWindow.focus();
}
window.setInterval(focus, 100);
or jQuery:
$("body").click(function(){
$('#iframe-element').focus();
});
This needs to be run on the host page of course, because allowing an embedded iframe to steal focus is not in the nature of browser/webpage security.
Good luck.
This is not normally possible because of a browser security feature called the Same-Origin-Policy. 1
Basically, one page on one domain can not interact with or intercept the events of another page because it would present a security risk. Imagine opening a frame to a user's bank account and then capturing keypresses they did in that frame -- obviously that would be a Very Bad Thing (tm). It works the other way around too, the contents of a frame can not see events on the parent page unless they are on the same domain.
Now browsers do still want to allow you to interact with contents within a frame. So when you start interacting with contents of one frame, the other frame loses any awareness of what's going on.
So, after all this, you're probably still wondering how to address your problem. Here are a few good options.
Instead of loading your game in an iframe, have the user embed it into their current page instead. You could have them do this by either providing them with the code to your game and having them place it in their page, or by providing a script tag that loads code from your own server and places the game into their page.
Use Cross-Document messaging 2, A relatively new browser feature that allows pages to get around the normal Same-Origin-Policy restrictions. Basically, with Cross Document Messaging, you can run javascript on the parent page that sends events into the page within the iframe.
This is not a complete Solution but an Idea....
What about capturing all Keyboard events on the site and then decide (e.g. by checking the value of some invisible input/element within the iframe) if a game is in progress. If it is, preventDefault of the action and trigger some custom event inside the iframe and just make your game listen for the custom events too...
Actually I just found this:
Access elements of parent window from iframe
That way you could apply my solution from within the Iframe and check for clicks/keys on its parent
Regards
Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.
I am playing around with events and I am trying to make an event that is triggered when text in my iframe is highlighted. I thought I might try to use the onmouseup event:
<div id="instapaper_div" onmouseup="handleEvent(event)">
<iframe id="instapaper" src ="http://www.instapaper.com/m?u=<%= #content %>" width="90%" height="90%"></iframe>
</div>
<script type="text/javascript">
function handleEvent(oEvent) {
alert("Event!!")
}
</script>
The <%= #content %> is a properly working piece of embedded Ruby in case anyone was wondering what that was, but it's not relevant to the question here.
If I click anywhere outside of the iframe on the web page (this div section is the entire body of my overall html file which isn't posted here), it correctly displays the alert "Event!!". However, if I click inside the iframe, which is where I want the event to actually occur, nothing happens. How do I get it to register this event inside the iframe? I tried using onmouseup inside the iframe tag but that did not work. Also, if onmouseup is not the best way to recognize a "text highlighted" event for the iframe which is what I want, what event should I be using and how do I use it?
You can't detect the event because your iframe comes from a different domain, so the same-origin policy applies.
Basically, the SOP means you can't interact with the DOM of anything loaded from a domain other than your own.
(I'm assuming you're not serving your site from instapaper.com. If you are, then you should be a able to detect an event in an iframe loaded from instapaper.com.)
https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript