I have a simple HTML page with an iframe. I set its src to another HTML
file and I can change the style of any chosen element at will using code
like this (a basic example):
function elementStyle()
{
var iFrame = document.getElementById( "iFrame" );
var element = iFrame.contentWindow.document.getElementsByTagName(
"table" )[0];
element.style.color = "#ff0000";
}
However the src of the iframe must be an external URL and cross-domain
restriction prevents me from accessing its elements. I have no control
over its content so I can't use postMessage() because I can't receive
any message posted.
Any ideas of a way to get round this?
Note: it must work for anyone with any browser so musn't use any special
methods (like jQuery, CORS etc).
Thanks
Is there a way of making a webpage only available through an iframe? Basically if you go directly to the iframe source you wouldn't be able to see the content, but if you view the site through an iframe you would be able to see the content.
A jQuery or Javascript solution would be perfect, and I do have to power to edit the source.
try adding this in head of your webpage
<script type="text/javascript">
if (top === self) {
alert('Sorry ! WebPage is only accesible via iframe') //if current window is topmost window
window.close();
} else {
alert('Well Done');
}
</script>
self means current window and top means browser's topmost window
When my iframe loads I need parent page to load different content(header,footer) while iframe its still there. I added to iframe :
window.top.location = "http://mysite.com";
It loads the new parent page but its reloading over and over again.
How can I enable only one load/iframe load, or some solution.
I have tried with
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
but it does nothing.
Thank you.
you just can't reload the iframe parent only without reloading the iframe too! If you want to change some content in parent page you must do it with javascript from the parent page and not the iframe.
And if you want to catch the "iframe loaded event" you must do it from inside the iframe. Looks like an impossible situation but you can still do it!
You need to let iframe and parent page comunicate, and you can do it with html5 postmessage (works even if parent and iframe are in different domains!). If you need to have IE7 compatibility too you can use easyXDM javascript library instead of postMessage, just search for example in their site.
Simply do a postMessage from iFrame when jQuery(document).ready() (or any similar event) is triggered, the parent page must have a listner waiting for this message for trigger the header/footer/anything change event.
I have an iframe element with a random scr attribute. When I do refresh the page every time, the iframe should load the page with different query parameters based on the src attribute. But in firefox, if I try to load dynamic URL in an iframe, it always execute the first time executed URL eventhough the src attribute changes dynamically. The query parameters also not passing correctly. So, how I can solve this issue?
eg:
<?php
$url = "http://localhost/test.php";
$rand_val = rand(1000, 9999);
echo "<iframe name='dynamicload' src='{$url}?rand_val={$rand_val}'></iframe>";
?>
We had the same problem with firefox caching the iframe src and disabling the cache on the original page as well as the iframe page did not help. We put the following code (jQuery code) in the onload function of iframe:
$(parent.document).find("iframe").each(function() {
// apply the logic only to the current iframe only
if(this.contentDocument == window.document) {
// if the href of the iframe is not same as
// the value of src attribute then reload it
if(this.src != location.href) {
this.src = this.src;
}
}
});
It's reported as a bug of firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=279048
one workaround is resetting the src of iframe:
document.getElementById('iframe_id').src = 'target_url';
Still there will be two requests: the first request is wrong and cancelled immediately before the second request which is correct.
Your code in PHP executes once and sends the content to the browser. When you refresh the page, the code doesn't run again in the server, because it is served by the cache. So the src of the iframe uses the same random number.
To avoid this you need to disable caching of the original page (not the iframe). Or you could have the random number generated in the client side (using javascript) so that is unique every time.
All other answers doesn't work in my case. So I decided to solve the problem my creating the total iFrame dynamically with JavaScript like it is described in this answer:
<div id="dynamicload"></div>
<script type="text/javascript">
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "http://localhost/test.php?rand_val=<?php echo $rand_val; ?>");
ifrm.style.width = "500px";
ifrm.style.height = "500px";
document.getElementById("dynamicload").appendChild(ifrm);
</script>
Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
I use the Prototype framework to make it easier:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
In short no.
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
Yes. Take a look at this other thread for details:
How to apply CSS to iframe?
const cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].contentWindow.document.body.appendChild(cssLink);
// ^frame1 is the #id of the iframe: <iframe id="frame1">
You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
The quick answer is: No, sorry.
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
Use Jquery and wait till the source is loaded,
This is how I have achieved(Used angular interval, you can use javascript setInterval method):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
Combining the different solutions, this is what worked for me.
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
Apparently it can be done via jQuery:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795
probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.
Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine.
The only solution is to fetch the page from the server side code and change the needed CSS.
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Just add this and all works well:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
If the iframe comes from another server, you will have CORS ERRORS like:
Uncaught DOMException: Blocked a frame with origin "https://your-site.com" from accessing a cross-origin frame.
Only in the case you have control of both pages, you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage to safely send messages like this:
On you main site(one that loads the iframe):
const iframe = document.querySelector('#frame-id');
iframe.contentWindow.postMessage(/*any variable or object here*/, 'https://iframe-site.example.com');
on the iframe site:
// Called sometime after postMessage is called
window.addEventListener("message", (event) => {
// Do we trust the sender of this message?
if (event.origin !== "http://your-main-site.com")
return;
...
...
});
Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.
References:
Printing content of IFRAME
Accessing and printing HTML source code using PHP or JavaScript
http://www.w3schools.com/js/js_htmldom_html.asp
http://www.w3schools.com/js/js_htmldom_css.asp