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.
Related
I am using Limesurvey to create a customer survey. As I want to embed the survey at my company's homepage, I am using an iframe to make that happen. This ensures that I have my official header and footer available and I don't have to rebuild that elements in Limesurvey.
Limesurvey offers a possibility to redirect to another page after somebody has completed the survey (e.g. a thank you page). As I am embedding Limesurvey, I cannot redirect to my offical thank you site from my company's homepage as I would have double header and double footer.
What I have thought of, is to redirect to a dummy site. From the parent site, I want to check for that event and trigger my redirection to my thank you site.
I have no idea how to do that in Javascript. How do I define an event listener to check if a specific site has been loaded within the iframe and then fire my redirection in the parent.
Thanks a lot!
You can inspect the URL in the IFrame using <element>.documentWindow.location.href if it is on the same domain:
e.g if your iframe had id 'frame'
document.getElementById('frame').documentWindow.location.href
However, You can't inspect the URL inside an IFrame if the IFrame is on a different domain, this is due to a security mechanism in modern browsers.
If you are not in the same page it will raise an exception:
Error: Permission denied to get property Location.href
See this SO answer for more detail also as noted here the property is named differently in chrome: documentWindow is called contentDocument in Chrome
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 a page with an iframe on it, and I need a button inside the frame to do a redirection to another page, if I do it the normal way the content of the iframe will be reloaded, what I need is the main window to change its url.
I havent posted any code below as I dont know if this is even possible
Yes this is possible. You have to send a message from the iFrame, when parent receives the message, then you do something. Here is an example: http://jsbin.com/necuvi/2/. Here is some documentation on how it works. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.
With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-
You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.
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.