Make changes in the iframe which is loaded from external - javascript

I'm trying to get the links to all images and get them copied with click event in the iframe but it gets loaded from the external server src. I've tried to access the tags inside iframe with contentDocument and contentWindow.document. In the first case I'm getting null value, in the second - "Blocked a frame with origin from accessing a cross-origin frame".
Is there a way to access this iframe and change its content?

Related

Is there a way to get an iFrame from a postMessage?

I've got a program that needs to juggle multiple iFrames at once that each communicate to the main window with postMessage.
I need to find a way to see what iFrame element sent a specific message.
I've tried using message.source however it only shows a Window element from inside the frame (that cannot be read as they're sandboxed). That excludes the possibility of finding it via the iFrame's contentWindow.

Render dynamic content in iframe base on parent

I want to display my website in iframe of other domain(s). When displayed in iframe of that domain, I want to perform some actions like hiding/displaying content. Pages from my website are also iframed in same domain as well. So there is dynamic behavior. How do I find out where is my page iframed? There will be navigations from one page to another in iframe and whenever full page load happens, I want to know the context/parent where my page is iframed.
Using postMessage is not an option because it is async and I don't have control over other domains/apps. I found out iframe name can be accessed from following question -
access iframe name from inside iframe
Can I use it to find out the iframe context. (I can ask other domains/apps to set particular name to iframe so that they get correct rendering of the page)

Jquery cannot get contents of <iframe> element

Hi I am trying to select form tag using Jquery from the link below in chrome console:
http://www.dcoi-conference.org/#!registration/cpq5
I tried:
$("form")
This gives empty array
Here I see the form element is in iframe. Thus I also tried
$("iframe")[0].contents();
But was uanable to get any results.
Please help.
The form in that page is in an iframe that comes from a different origin than the page. So, the browser security model will not allow you to access the iframe DOM from the parent page.
Without moving the content out of that foreign domain or placing code into that foreign sourced iframe, there is no way to work around that security limitation from just the parent page.
Possible solutions:
Stop embedding an iframe from a foreign domain because there is no way to get to the content of a cross origin iframe. Put the content into your own page directly where you can access it freely.
Add code to the foreign domain that will cooperate with the parent page. Cooperating cross origin frames can communicate via window.postMessage(), but it requires cooperating code in both frames in both domains.

Who owns the iframe tag between the site creating the tag and the site who's contents are in the tag?

I've just been wondering where the boundry for scripts of the iframe contents lie. Which element is the highest parent of the iframe contents. The iframe itself or the "html"
I tried the following but then I realize the scripts inside the iframe can't access the iframe element properties, and no warning is thrown.
The following script resides inside the iframe.
<script>
$(document).ready(function(e) {
$(document).on('click', '.subscribe_submit', function(){
console.log($('.iframe').attr('data-test'));
//////////// data-test returns undefined for this.
</script>
while the iframe is like this.
<iframe data-test="$2y$12$PPuMZWPdy.zhaVnGWV7SD.Tqhw87qLe4e.vaTtWuIccxLrUFu/cda"></iframe>
*This is cross-origin.
*In data-test, is not a password, I just used the PHP password API to encrypt that string.
The browser window owns all.
frames are a property of the window and within frames are separate windows.
Similarly the document for your page is a property of the window.
Browser security rules dictate what you are or aren't allowed to do based on the domain of the main window as well as what frames are allowed to do with regard to interacting with any higher level window.
Within your page (document) you should have no problem accessing the iframe tag and setting or getting attributes. There are however frame blocking headers that pages can set to prevent being loaded within another frame
Need more details to troubleshoot why you aren't able to get the value of the data attribute
The host page owns the iFrame element. If the contents are on another domain, the contents are bounded at their own "window" which sits inside the iFrame.

If element found change page content

Is it possible to change page content if element exist on page ?
if (window.frames[0].document.getElementById('xl')) { //load content of page acta.html}
Only if the content loaded in the frames is in the same domain of the page where the script is executed. See the Same-Origin Policy – SOP.
Otherwise you can't access to the frame's DOM.
If the page are in the same domain, then your code is perfectly valid – assume the page in the frames is loaded.
Update:
To change the content, then you can simple change location object of the frame:
if (window.frames[0].document.getElementById('xl')) {
window.frames[0].location.href = "acta.html";
}
If you have a reference to the frame / iframe element instead of the window's (frame[0]), you can also use the src attribute.
You can also change the top window's location just doing:
window.location.href = "acta.html";
However that will change, of course, the URL of the page too. If you want to keep the URL as before, you should use another iframe that basically wraps your current main window and the hidden frame. So the URL displayed in the address bar will not change even if you change the content of the first frames to "acta.html".
Another approach could be use the XMLHttpRequest object to makes a http call and load your page's source, then replace the body of the current page with the one's retrieved by the XHR. However, that's ugly. This kind of redirection, keeping the same URL, should be done on server side, not on client side.

Categories

Resources