I'm trying to select a div used in an iframe, but the select instruction always return an empty object, any idea how to solve this please:
console.log($(this).contents().find('div'));
JSFiddle: https://jsfiddle.net/8jxvry4c/6/
Div is not accessible because it is not part of your DOM but part of iframe which itself consist different DOM for some other place.
In order to get div of iframe, you need to fetch all content of iframe and then find the div you wanted.
Following code can be used to fetch iframe content but it should be within same domain if not it will throws cross domain error
$('iframe').contentWindow.document.body.innerHTML
Or you can use cross-document messaging in Javascript where message is sent to iFrame and iFrame respond accordingly.
Main page
myIframe.contentWindow.postMessage('hello', '*');
iframe
window.onmessage = function(e){
if (e.data == 'hello') {
alert('It works!');
}
};
You can refer this link for more detail.
There are also some plugin available to perform these kinds of task more swiftly.
You can't access to DOM of a different domain because of Same-origin policy
Under the policy, a web browser permits scripts contained in a first
web page to access data in a second web page, but only if both web
pages have the same origin.
This policy prevents a malicious script on one page from obtaining
access to sensitive data on another web page through that page's
Document Object Model.
But you can accomplish this on server side of course performming a GET/POST request. And again you can't perform a GET/POST request from javascript (ajax) unless the other domain have Access-Control-Allow-Origin header.
Related
So, I need to add
https://www.rapidtables.com/tools/notepad.html in my website and I need to remove the header of their website.
Is there any way?
if you do iframedoc = document.getElementById("my_iframe").contentDocument; you can do everything you can do with document. The problem is that if you dont own the page you are embedding, your edit will be blocked by your browser because of cors (https://en.wikipedia.org/wiki/Cross-origin_resource_sharing). To bypass this you need to fetch the page with your backend server and pass the file to your javascript.
I have an iframe and it loads a page, random.php, which immediatly redirects to another page.
header('Location: /random_page');
This page is not on the same domain as the parent of the iframe. Is there a way using JavaScript to see the URL of the redirect or the header information or is it impossible due to security?
This is what I have tried so far but the value is always random.php. This is called after the iframe finishes loading.
var source = $("iframe").attr('src');
Short answer: It is not possible. You can use three different methods to get URL content:
Request page as a resource
Send XMLHttpRequest
Use iframe
None of these three methods allow you to distinguish between 200 (OK) and 302 (MOVED) response codes. If page writes redirection header, browser engine immediatelly jumps to that page.
Say I'm given an HTML element node, such as a
<div id = "content"></div>
and that's contained in an iframe. It's passed in to me as a node. I want to be able to get the iframe node that the element's in -- there's no specific id and I want to be able to access it just from the element node. I've tried
elNode.window
and
elNode.parent
But obviously that gives me undefined. I'm also passed in the current window, but trying
curWindow.parent
just passes me in the window, so that was led to no avail. I really just want to get the iframe from the element node. If anyone has any pointers, that's much appreciated.
this issue is due to the same-origin policy: the browser won’t allow the original script to inspect the contents of the cross-origin document. more details about sop https://en.wikipedia.org/wiki/Same-origin_policy. Generally, there are following ways to solves this issue:
using element has never really been subject to the same-origin policy: it will download and execute any script, regardless of origin.
cross-document messaging,allows a script from one document to pass textual messages to a script in another document, regardless of the script origins. Calling the postMessage() method on a Window object results in the asynchronous delivery of a message event (you can handle it with an onmessage event handler function) to the document in that window.
Cross-Origin Resource Sharing https://www.w3.org/TR/cors/ : This draft standard extends HTTP with a new Origin: request header and a new Access-Control- Allow-Origin response header. It allows servers to use a header to explicitly list origins that may request a file or to use a wildcard and allow a file to be requested by any site.
To support multi domain websites of this sort, you can use the domain property of the Document object . But, the domain value must have at least one dot in it; you cannot set it to “com” or any other top-level domain. for example ecar.car.com, pcar.car.com. you can set the domain to car.com.
hope this can give you a kind of help
I have a jsp in which charge an iframe which belongs to a different domain. Inside that iframe there is a JSP which navigates to a servlet who navigates to another JSP.
What I want is to make changes in the primary JSP (in which the iframe is loaded) from the iframes second JSP (have to do that way because they are independent web apps).
I tried to window.top, parent, and all reference the Servlet from the JSP loaded, and in other cases have obtained an access denied response.
There any option to do it or would I have to rethink everything?
In summary:
....
<br>< div id="xxxx">< /div>
<br>< div id="yyyy">
<br>< iframe src=(other domain)><br>
Here I load a webpage. it navigates to a servlet and to a second JSP. This is the JSP to do the inner.html in the "xxxx" div
<br>< /iframe>
<br>< /div>
....
Edited:
For more information:
1.- window.top.getElementById("xxxx")... gets an error (does not accept getElementById)
2.- window.top.location.href = "http://www.google.com"; Works fine
You can use messages between window frames. The content in your iframe will send a message to parent frame and parent frame has to explicitly receive that message and take action.
Messages are sent using
parentWindowObject.postMessage(message, targetOrigin);
Are received using
addEvent(window, "message", function(e){
console.log(e.data);
});
That way you can send objects with instructions on what the parent frame should do. Please note that sending JS to be evaluated is not recommended.
You can read more about posting/receiving messages between windows here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Excerpt from the page:
The window.postMessage method safely enables cross-origin communication. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at locations with the same protocol (usually both https), port number (443 being the default for https), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.
I have a window, with an iframe in it.
When i clicking a button, then the iframe will load (loaded from a web site).
Is it possible to retrieve the content of that iframe? How can I retrieve the content of that page?
I can view the source code by left clicking iframes View Source.
I need to store the source in a DB.
1.
var iframe = document.getElementById("ifrm");
alert(iframe.contentWindow.document.body.innerHTML );
2.alert(window.frames['ifrm'].document.body.innerHTML);
these two comments are showing "access denied" error.
Please help me.
This should work (if it's on the same domain):
document.getElementById('iframeId').contentWindow.document.body.innerHTML
Note that you need to make sure the frame has been loaded completely before you run this code. Otherwise, you will get strange exceptions.
Disclaimer: I have not tested this.
Here's the google query I used: google query
It is generally not possible to read the contents of an iframe loaded from another server, due to the same origin security policy. However, it looks like you want to store the content on the server anyway, so why not request the content from the server?