I'm using an iframe and dynmically loading its content from an API. I'm trying to find a way to clear the iframe of all of it's content without changeing the src attribute. E.G.
<iframe class="bla" src="//blabla">
<html>
Lots of HTML rendered
</html>
</iframe>
Needs to become:
<iframe class="bla" src="//blabla"></iframe>
Very important that I keep all of the iframe attributes.
Is there a way to do this with javascript or jquery?
See Oscar Jara's answer to a similar question here:
https://stackoverflow.com/a/11658546/4669143
If the iframe origin in the same as the enclosing site's origin, you should be able to do it without violating the cross-domain policy. Otherwise, it won't work.
He includes a working fiddle.
Related
I have a iframe, where I try hide one div element (frame with facebook).
<script type="text/javascript">
function changeCSS(){
frame = document.getElementById("radar");
frame.contentWindow.document.getElementById("div_facebook").style.display='none';
}
</script>
<iframe name="radar"
onload="javascript:changeCSS()"
id="radar"
width="650"
height="450"
frameborder="0"
scrolling="no"
src="http://radar.bourky.cz/index.php?lat=49.9847&lon=16.6241&zoom=8&map=0&repeat=3&last=4&r_opa=30&l_opa=10&l_type=0&cell=0&anim=1&c1=0&c2=0&c3=0&c4=0&c5=0">
</iframe>
And here is problem from console in chrome:
index.html:85 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
at changeCSS (file:///D:/jirka/Desktop/kalend%C3%A1%C5%99/index.html:85:21)
at HTMLIFrameElement.onload (file:///D:/jirka/Desktop/kalend%C3%A1%C5%99/index.html:96:170)
I have read many instructions, but problem weren't solved.
If anyone could help I'd be very much appreciated.
The problem is you can't modify the contents of an iframe unless the domain of both the main page and the iframe are the same.
I'm guessing from what you pasted that they aren't the same, since it looks like the outer is being run locally and the iframe is from a domain (radar.bourky.cz).
You won't be able to manipulate it with JavaScript from the outside. That's a security precaution to prevent malevolent actors from doing bad things with websites. You won't be able to get around it unless you control the code both inside and outside.
Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.
I have simple HTML code,
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
<div>
<object type="text/html" data="http://google.com"></object>
</div>
</div>
</div>
I get error as,
This content cannot be displayed in a frame
How to show webpage inside div?
www.google.com and other sites use a X-Frame-Options HTTP header that specifies that embedding is only allowed from the same origin:
x-frame-options:SAMEORIGIN
Browsers respect this header and prevent you from embedding the site
You should use <iframe> to show page inside page
<iframe src="http://example.com"></iframe>
The reason for this is, that Google is sending an "X-Frame-Options: SAMEORIGIN" response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.
The X-Frame-Options response header
Here is work around;
Working Fiddle
<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>
Here is an other workaround to overcome your problem;
How to load website HTML using jquery?
good luck!
I have a webpage that I would like to embed within another page. On the page that is to be embedded I have some window.onload javascript that will load a PDF document via the embed tag. If I use just the Iframe tag like this:
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
The Javascript will run just fine. But I am trying to create a background and border for the iframe so I have wrapped the iframe in a div like so:
<div id="content" class="border">
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
</div>
As soon as I do it this way the javascript will not run. Here is the screenshot of what I am trying to do. I do not believe that the styling that is present on the div ( curved borders, gradient, etc is possible on an iframe)
I am using PDFObject to generate the PDF on the page. The iframe is also loading the company's external website in the content section on demand and this is what they want so unfortunately i have to use iframes. This has to be done without using anything except javascript as well otherwise I would just use php.
I have to post the SCREENSHOT outside of this site on photobucket due to restritions sorry:
http://i721.photobucket.com/albums/ww217/the_t3rminat0r/Capture-2.png
It looks margin property in div style (or border class in your example) causes the problem.
I was hoping that someone can help me, I am trying to get the URL of a page in a iframe:
<script language="JavaScript">
function myLocation() {
alert(document.all.myFrame.contentWindow.location);
}
</script>
<button onclick="myLocation();">Location of Frame</button>
<iframe src="http://www.google.com" width="800" height="600" frameborder="0"
scrolling="auto" name="myFrame"></iframe>
This basically will give me the location of the iframe in my page, but does not give me the google.com url - it is also important to give me the url of everypage that I may open from the google results, so when I am on google.com it should give me the google.com url and if I browse to www.facebook.com it should give me the facebook url...
Any ideas welcome! Thanks
The same origin policy prevents accessing details (including the current URI) of documents on other domains.
If you want to work around this, you will either need to use something other than a web page (such as a standalone application or browser extension) or proxy all requests through your own server.
you may want to use some sort of javascript library, but i've tried this code on deviantart.com using raw javascript code:
document.getElementsByTagName('iframe')[0].src and it gave me the result i was expecting.