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.
Related
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.
Ok. This might have been asked several times but my problem is slightly different. I have following page tab in my facebook application:
Facebook Page Tab
This facebook page tab has my website embedded as iframe into it. What I want is that is to get the URL of current page inside my application.
For example, if you open above link you see facebook URL in your browser(obviously) address bar. In my iframe I just want to retrieve the URL of the parent page in which it is embedded.
I know same-origin policies in Javascript don't allow playing with cross-domain parent page's markup using javascript but I just want to retrieve the parent page URL, thats it.
Is that possible in ANY way?
Any way to access the address bar URL in my PHP application?
Thanks.
You probably don’t need the “actual URL”, but only the page id, I assume …? That you can get by decoding the signed_request parameter that gets POSTed to your app on initial load into the iframe.
How to “decode” it is described here, https://developers.facebook.com/docs/facebook-login/using-login-with-games#parsingsr
If you’re using the PHP SDK, that has a method already that does this for you.
You can use this to access it in JavaScript:
top.location.href
"top" is better than "parent". Because if your iframe is itself in another iframe then parent will return that iframe's location. "top" will return the highest location.
This will be a tough one, because CORS forbids to access the outside frame:
The referrer doesn't help very much either.
If you want to use the signed_request, and want to send custom data/parameters to your app, have a look at https://developers.facebook.com/docs/appsonfacebook/pagetabs#integrating
You can then fill the app_data parameter, and decode that in your app.
Try one of these:
parent.document.location
parent.window.document.location
parent.window.location
parent.document.location.href
I'm not sure if this will work on facebook though
How can I get the html of an iframe without physically putting the iframe on the page? Can I put the iframe into a variable and get it that way?
If you're using node.js (which I would recommend for this), then take a look at jsdom.
As for javascript specifically, you cannot make a call to an external page using javascript (without using hacky methods), as it would violate Cross-domain policy
An untested afterthought, but you might be able to put an iframe hidden through css and then access the content through the document/jquery.
You can make a php-page with the HTML-content,
Easily include the file with php include:
<?php
include "filename.php";
?>
but...why?
You cannot use javascript to get content from cross domain url. So even if you have actual iframe element on your page, you will not be able to access its elements using javascript. This is called Same Origin Policy.
though JSONP is an alternative to your case, you will not be able to access elements inside iframe. You can use Jquery and JSONP to get html of cross domain page
Another option For this scenario is, you can grab the content from server side scripting language like c#, PHP
Lets assume I have my browser load an Iframe with <iframe src="test.html">
Can I, using ajax, load the content of test.html into a div in the main html page?
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.
Tips are appreciated,
Thank you,
Maxim.
No, you can't.
When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.
The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.
Can I, using ajax, load the content of test.html into a div in the main html page?
Yes (since your example has a relative URI and is on the same host) …
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.
… and no. You still can't read data from remote hosts.
I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.
function insertDivFromFrame(divname, framename) {
var frame = document.getElementById(framename);
var d = frame.contentWindow || frame.contentDocument;
if (oDoc.document) {d = d.document;}
document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}
I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.
... you may, however, design an AJAX request to local host and retrieve information from the remote server (as described here).
If you write a php/perl/etc. script to output the contents of a document from another domain, it'll give you access to the contents as the resulting page would be considered by javascript to belong to your domain. If you're not familiar with any server-side scripting languages, I'm sure you'd be able to find a script that'll do this for you by doing a simple google search.
Best of luck.
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?