So I've tried to do a bunch of research and can't seem to find the correct answer for my question so I wanted to reach out and see if anyone knows much.
What I'm attempting to achieve:
Check the contents inside an iFrame and return a boolean whether there is content or not.
Here is what I've attempted:
function check_iframe_body_content(element) {
let has_content = false;
let iframe = element.contents().find('body');
console.log(iframe);
if (iframe.length > 0) {
has_content = true;
}
return has_content;
}
The element is the iFrame return, which will be an array:
When the script tags are disabled, I get the following return:
When the script tags are enabled, I get the following return:
How can I properly determine if the <body> is empty and when it's not? I've tried to do .length on multiple different occasions and each time it comes back as has_content = true because it finds the body element, but it's actually empty.
All help will be appreciated!
You wont have access to the content inside iframe if it's loaded from another website as it's a major security breach.
if that was possible a website could add an iframe to google.com and get access to user personal information like their email address, name and etc.
depending on why you want to check content of iframe, there might be other workarounds.
Related
This has been asked before but most answers seem to assume that the parent window is also an iframe that can be selected.
I have a DIV in my parent window:
That I want to display if an error happens in an iFrame embedded on the page.
Here is my iFrame javascript I have attempted:
if ( x == "" || y == ""){
parent.document.getElementById("error").style.display ="block";
parent.document.getElementById("error").style.transition ="all 0.5s ease";
parent.document.getElementById("error").style.opacity ="1";
parent.document.getElementById("error_write").innerHTML = "Oops, looks like you've missed an input field. Please ensure both fields are completed in order for the converter to work.";}
This doesn't seem to pull the "error" element from the parent window and display it. This code WORKS if not attempting to access element from another frame.
Please help.
I understand that you've searched this out, but the answer will always be the same .. The reasoning that you cannot do this is security related ... I understand you are trying to do something as benign as "passing an error"
However, Imagine this -- What if you were a malicious person, loading a login page for, say, a bank in an <iframe> on your page -- And you were allowed to pass login variables from the <iframe> to your parent page ... This of course is overly dramatic, however it is the reason most, if not ALL browsers disallow passing data between <iframe> and parent.
I have created one application where I am generating multiple nested iframes dynamically. In my structure, I have one iframe name as "list" along with same value to ID attribute. I get name as " ", In chrome when I tried to check its name as mentioned below:
"parent.content0.list" OR parent.frames['content0'].frames['list']
Only I get its name when I use index of its iframe like below
"parent.content0.frames[0]" OR parent.frames['content0'].frames[0]
All my iframes have name and Id attribute with same value.
Also, in chrome and Mozilla I get iframe instead of window object when i try below line of code on debugger:
parent.frames['content0'].frames['list']
but index path give window object
parent.frames['content0'].frames[0]
Check attached screen shot for more clarification. check this image
Let me know if you need any other details.
Don't know why iframe with index 0 have this issue in my code. All other iframes and index iframes are accessible and return correct value.
Because of this my form target is also not working as expected because my form has same iframe name as target.
Can anyone please help me to understand this behavior?
Note: Standalone code gives me correct name but dynamically created iframe[0] create an issue.
I have an iframe from another domain. Since It's not possible to edit anything I want to read the content of the iframe.
The iframe has 4 pages. On the fourth page there is some text(example:"It's done"). I want to write something to a MySql database if the text appears in the iframe.
To accomplish this I need two things. 1. Read the contents of the iframe. 2. Execute this code part every X milliseconds to find the text I'm searching for.
1: var iframe = document.querySelector('#id_description_iframe');
var iframeContent;
if (iframeDocument) {
iframeContent = iframeDocument.querySelectorAll('#frameBody');
}
2: window.setInterval(function_name, 10000);
I was wondering if this doesn't conflict with the same origin policy?
Second thing I was wondering about: How do I then write this to mysql database?
1: Make another page that receives a value throught GET method.
2: By the JS on the iframe page call another tab if the text has been found. The url would be the get url.
3: There save it to the mysql database.
4: after page loaded close tab again.
Really hope someone can help me out. Excuse me if the question isn't clear since I did really try to make it a really clear question.
Get all content of other site:
var pageContent, iframe, iframeContent, iframeUrl = null;
pageContent.load(<url>);
iframeContent = pageContent.find('iframe')[0];
iframeUrl = iframeContent.attr('src');
iframe = pageContent.load(iframeUrl);
Then, the content of iFrame is read to use on 'iframe' variable.
I'm using the Google Chrome JavaScript console and I was just looking at the Gmail page and just practicing manipulating the DOM. However, when I do the following it just comes back as null:
document.getElementById('gbx3');
There is a div element in the page that has an id of 'gbx3' - so why is it returning null? What would/could be causing this? The same thing occurs using the Firefox web console.
If you try and access the 'gb' id (this is the main top toolbar) in the same Gmail page it comes back null, but if you access this element at google.com it will come back with the element.
GMail is composed of frames. This one works:
frames[3].document.getElementById('gbx3');
In general, if you know the ID of the iframe element, the contentDocument property can be used (provided that you don't have same-origin problems, and the document is loaded):
document.getElementById('hist_frame').contentDocument.getElementById('gbx3');
As per my comment:
My best bet is that gbx is inside the iframe that contained the search
result, and document.getElementById works on the same scope as your
console
You can search all the frames to find what you need:
for(var i = 0; i < frames.length; i++) {
var curDoc = frames[i].document;
if(curDoc.getElementById('gbx')) console.log(curDoc.getElementById('gbx'));
}
I have two iFrames in my page and I would like to the value of an input field form one iFrame to an input field of the other iFrame. How can I do this?
You will need to set a hidden field or something in the parent:
window.opener.document.getElementById(Client ID of Hidden Field).value = Selected IDs;
You will then need to set the src attribute of the second iFrame and append the value as part of the querystring
something like:
<iframe id='iFrame2' src='/myPage.html?val=myValue' ></iFrame>
You can probably do this in javascript, when I did I did it with asp.net as the scenario was different but probably something like:
$('#iFrame2').attr('src', '/myPage.html?val=' + $('#myHiddenField').val());
Not the easiest. Can we assume that both the IFRAMES, and the parent document are all part of the same domain, and all the same doctype? If not, security restrictions are likely to block you.
Also, what browser(s) do yo uneed it to work in?
OK, given your answer above about being in the same domain, etc.
The answer about setting the URL of the IFRAME will work if you want to send/receive from the other IFRAME. However, I read it as you want to set a value in an existing field.
If that is the case, you need to do something like:
1. Assume IFRAMEs have the ids I1 and I2
2. Put this code on the parent page (you can trigger / place it in a child, but it gets more complicated as you need to handle load/ready state and do additional lookups.
var if1 = document.getElementbyId('I1');
var if2 = document.getElementbyId('I2');
//Or use $get from AJAX framework, etc
var doc1 = if1.document;
var doc2 = if2.document;
//These may throw security or load exceptions if the IFRAMES are not loaded, cross domain, or do not contain HTML.
doc2.getElementById('targetElement').value = doc1.getElementById('sourceElement').value;
//You should do the usual checking for the element existing, etc