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
Related
I'm stuck using a theme in WordPress for a client where the header is horrible in responsive view. I can work with desktop widths but anything below 768px needs to have an entirely different markup because of the clients demands -- any attempt to try to do this via CSS has led to even more UI disasters. My hope was to utilize jQuery's .html() functionality to swap out Bootstrap grid elements at < 768px. Here's a snippet example -- say I needed to move the logo from a far right position in desktop to the first element on the left in a header. I'm using the theme's declarations for the dynamic logo correctly:
if($(window).width() < 768) {
$('.top-bar').html('<div class="col-md-3"><?php vg_ebuilder_display_logo_sticky(); ?><div class="logo-inside"><?php vg_ebuilder_display_top_logo(); ?></div></div>');
}
But this returns commented out PHP:
<!--?php vg_ebuilder_display_logo_sticky(); ?-->
and
<!--?php vg_ebuilder_display_top_logo(); ?-->
So, maybe two questions here: is there a way to add dynamic PHP like this in WordPress via a jQuery .html() function on $(document).ready and, assuming it could, would it indeed be dynamic if loaded after the DOM?
No. PHP runs on the server, not the client. The javascript would need to make a call to an endpoint that would perform the php logic, return a response, and that response put on the page. Inserting php on the client will not be invoked.
I can't 'comment' a suggestion to you as my reputation isn't yet 50, so hopefully this is the right answer. I found this worked for me with a similar issue in Joomla (Q48891999).
In the div you want to change, add a unique class, e.g. "builder".
Then, if you need to, write a new css class or classes starting with
#media (max-width: 767px) {
.your_new_class {
}
}
- but not using the name 'builder' for the new class - in your custom css file for the div you want to change.
Then use jquery .addClass to apply the css class to your div in your index.php. Something like this:
<script>
$( ".builder" ).addClass( "the_class_you_want_to_apply another_class" );
</script>
The spaces between the parentheses and the double quotes are deliberate, as used in the examples on the jquery website.
In my case, I added this to the bottom of my index.php just before the closing body tag.
You may need to have more than one of these scripts to apply to different elements.
Is this possible? For example, I'm loading all of my css files through my header. One of the things I'm using is the JQuery DataTables plug-in. However, I don't want to load the DataTables css unless the page content contains a DOM element of type "table". I've tried evaluating the page with:
file_get_contents($_SERVER["PHP_SELF"];
Which doesn't work. What's the most efficient way to evaluate your page's content in PHP, and load CSS files appropriately? Or, is javascript a better way to do this?
I would say you're over thinking this.
Set a far away cache expiration date on your DataTable css and simply let the user cache the css file.
This could be done using output buffering, but it sounds like a bad idea to collect the whole document, analyze it, and then add a style sheet header - it's likely to be slow, kludgy and may even hit memory limits in the case of huge tables.
I would tend to say always load the CSS files, and see to it that they're properly cached.
I found it easiest to just set some flags in my parent .php file and have the header file check for those flags and modify output as it gets loaded.
index.php:
<?php
$INCLUDE_TABLE_CSS = true;
include('header.php');
header.php:
blah blah blah
<?php if (isset($INCLUDE_TABLE_CSS) && $INCLUDE_TABLE_CSS) { ?>
<link rel="stylesheet" .... href="table.css" />
<? } ?>
blah blah blah
Unless you've got a large number of conditional settings, then this is fairly simple to manage.
Javascript is a better way to do this. You can do a deferred inclusion, sometimes called "lazy load". Within domready, you would check for the presence of a given class, let's say dataTable. If there are any elements with this class, you inject a new <script> or <link> tag into the header with a reference to the javascript or css file containing the needed script/styles. The <script>/<link> tag's onload event will be the callback to trigger whatever initialization you have to do once the script is in place.
My apologies that I can't tell you the jQuery way (I am a Mootools guy), but in Mootools there is a class called Asset that manages the creation of the <script>/<link> tag and the resulting onComplete event. I'm certain there is a jQuery analog to this.
Use jQuery! This code looks to see if there is a <table>...</table> object, and if there is, it creates a new <link> element with your desired CSS file and adds it to the header object.
if ($('table').length>0){
var link = $("<link>");
link.attr({type: 'text/css', rel: 'stylesheet', href: 'tableStyleSheet.css'});
$("head").append( link );
}
I've searched the entire web for a clear answer but haven't found one yet.
I have this site:
www.helixagent.com/todo/
and I want to load that entire site into a portlet in my main index page.
I tried an iFrame approach but it fails to load the site correctly. The styles and javascript files don't get loaded (i think)
Is there a way to make a portal that mimics a new browser page and load the content exactly as it would if it was directly accessed via the url bar?
It’s possible to perform cross-domain requests using jQuery.
Simply include this file after loading jQuery, and then you can do funky stuff like:
$('html').load('http://helixagent.com/todo/');
Note that this of course won’t load the embedded CSS and JS files. You’ll need to use an iframe for that:
$(function() {
$('body').append('<iframe src="http://www.helixagent.com/todo/" />');
});
Live example: http://jsbin.com/uruka
Here's an example using jQuery and iframe:
$(document).ready(function(){
$('#somediv').html("<iframe src='http://www.helixagent.com/todo/'></iframe>");
});
This should be placed inside the <head> tag of your page and it will load the entire site with all the js and css too into a div.
Have you looked at using Server Side Includes.
I have page which created dynamically.
Now I want to add ajax function, so I want to add if statement to change the outputs.
if(js is on){
...
...
echo "js is on";
}else{
...
echo "js is off";
}
Is there any way I can detect if js is on with php?
Or is there any way I can remove/hide it by jquery?
Thanks in advance.
PHP is executed before any browser action takes place, so no, PHP cannot directly detect whether the user has Javascript on or off.
You must provide a bit more info on what you're doing for us to find you a workaround. In PHP, it is possible to detect whether the call was made via AJAX or not using the $_SERVER['X_HTTP_REQUESTED_WITH'] global variable which jQuery will set automatically.
If you need to show an element when Javascript is enabled, you can first hide the element with CSS and enable it with Javascript/jQuery. The same goes the other way around also.
You can't do that in PHP because the page is rendered by the time you know. And apart from some crazy redirect scenario, your best bet may be to use CSS + JS to show/hide what you need:
What I normally do (and your mileage may vary depending on what you need to show/hide) is this:
<html>
<head>
... other stuff here, title, meta, etc ...
<script type="text/javascript">document.documentElement.className += " js"</script>
... everything else
</head>
Then you can use CSS to hide/show based on if JavaScript is enabled/disabled:
/* Hide by default, show if JS is enabled */
#needsJS { display: none }
.js #needsJS { display: block }
/* Show by default, hide if JS is enabled */
.js #fallback { display: none }
It can't do it directly, and workarounds for it are usually awkward and wasteful.
Use progressive enhancement technique instead.
Just make the website working without JS. If everything is fine, you can attach JS functionality with e.g. jQuery.
This is also called unobtrusive JavaScript.
So you basically don't distinguish between client with JS and client without JS. You don't provide different output. You set up your HTML code in such a way that you can easily identify the elements that should JS functionality an this functionality in a programmatic way.
This way is even easier for you as you don't have to think about different outputs and it guarantees that the site is also working without JS.
Here's a challenge that I was tasked with recently. I still haven't figured out the best way to do it, maybe someone else has an idea.
Using PHP and/or HTML, create a page that cycles through any number of other pages at a given interval.
For instance, we would load this page and it would take us to google for 20 seconds, then on to yahoo for 10 seconds, then on to stackoverflow for 180 seconds and so on an so forth.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Dashboard Example</title>
<style type="text/css">
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
iframe { border: none; }
</style>
<script type="text/javascript">
var Dash = {
nextIndex: 0,
dashboards: [
{url: "http://www.google.com", time: 5},
{url: "http://www.yahoo.com", time: 10},
{url: "http://www.stackoverflow.com", time: 15}
],
display: function()
{
var dashboard = Dash.dashboards[Dash.nextIndex];
frames["displayArea"].location.href = dashboard.url;
Dash.nextIndex = (Dash.nextIndex + 1) % Dash.dashboards.length;
setTimeout(Dash.display, dashboard.time * 1000);
}
};
window.onload = Dash.display;
</script>
</head>
<body>
<iframe name="displayArea" width="100%" height="100%"></iframe>
</body>
</html>
Use a separate iframe for the content, then use Javascript to delay() a period of time and set the iframe's location property.
When you are taken to another site (e.g. Google) control passes to that site, so in order for your script to keep running, you'd need to load the new site in a frame, and keep your script (which I'd imagine could most readily be implemented using Javascript) in another frame (which could be made very small so you can't see it).
I managed to create this thing. It's not pretty but it does work.
<?php
# Path the config file, full or relative.
$configfile="config.conf";
$tempfile="tmp.html";
# Read the file into an array
$farray=file($configfile);
# Count array elements
$count=count($farray);
if(!isset($_GET['s'])){
$s=0;
}else{
$s=$_GET['s'];
if($s==($count-1)){ # -1 because of the offset in starting our loop at 0 instead of 1
$s=0;
}else{
$s=$_GET['s']+1; # Increment the counter
}
}
# Get the line from the array
$entry=$farray[$s];
# Break the line on the comma into 2 entries
$arr=explode(",",$entry);
# Now each line is in 2 pieces - URL and TimeDelay
$url=strtolower($arr[0]);
# Check our url to see if it has an HTTP prepended, if it doesn't, give it one.
$check=strstr($url,"http://");
if($check==FALSE){
$url="http://".$url;
}
# Trim unwanted crap from the time
$time=rtrim($arr[1]);
# Get a handle to the temp file
$tmphandle=fopen($tempfile,"w");
# What does our meta refresh look like?
$meta="<meta http-equiv=\"refresh\" content=\"".$time.";url=index.php?s=".$s."\">\n";
# The iframe to display
$content="<iframe src =\"".$url."\" height=\"100%\" width=\"100%\"></iframe>";
# roll up the meta and content to be written
$str=$meta.$content;
# Write it
fwrite($tmphandle,$str);
# Close the handle
fclose($tmphandle);
# Load the page
die(header("Location:tmp.html"));
?>
Config files looks like (URL, Time to stay on that page):
google.com,5
http://yahoo.com,10
Depends on your exact requirements. If you allow JavaScript and allow frames then you can stick a hidden frame within a frameset on your page into which you load some JavaScript. This JavaScript will then control the content of the main frame using the window.location object and setTimeout function.
The downside would be that the user's address bar would not update with the new URL. I'm not sure how this would achievable otherwise. If you can clarify the constraints I can provide more help.
Edit - Shad's suggestion is a possibility although unless the user triggers the action the browser may block the popup. Again you'd have to clarify whether a popup is allowable.
Create a wrapper HTML page with an IFrame in it, sized at 100% x 100%. Then add in some javascript that changes the src of the IFrame between set intervals.
I think it would have to work like gabbly.com, which sucks in other websites and displays them with its own content over it.
Once you read the other site in and were ready to display it, you couldn't really do it "in PHP"; you would have to send an HTML redirect meta-tag:
<meta HTTP-EQUIV="REFRESH" content="15; url=http://www.thepagecycler.com/nextpage.html">
Or you could use Javascript instead of the meta-tag.
This is not doable in a PHP script, unless you want to edit the redirect.... PHP is a back end technology; you're going to need to do this in Javascript or the like.
The best you're going to do, as far as I know, is to create a text file on your web server and load a different HTTP address based on time out of that text file, then redirect the browser to the site found in that text file.
The first solution that jumps to mind is to do this in a frameset. Hide one of the frames, and the other display the pages in question. Drive the page transitions with Javascript from the hidden frame.
function RefreshFrame()
{
parent.VisibleFrame.location.href = urlArray[i];
i++;
if(i < urlArray.length) SetTimeout("RefreshFrame()", 20000);
}
var i = 0;
var urlArray = ['http://google.com','http://yahoo.com', 'http://www.search.com'];
RefreshFrame();
In this example the Javascript would be in the hiddend frame, and you would name your visible frame "VisibleFrame".
Disclaimer: I just wrote this code in the comment window and have not tested it
You could do this with JavaScript quite easily. It would help to know the deployment environment. Is it a kiosk or something?
For the JavaScript solution, serve up a page that contains a JavaScript that will pop open a new browser window. The controller page will then cause the new browser window to cycle through a series of pages. That's about the simplest way to do this that I can think of.
Edit: Agree with Simon's comment. This solution would work best in a kiosk or large, public display environment where the pages are just being shown without any user interaction.
The theory behind the request is basically the ability to cycle through web page dashboards for various systems from a "kiosk" PC. I oversee a data center and we have several monitor systems that allow me view dashboards for temps, system up time, etc etc.
The idea is load a page that would cycle from dashboard to dashboard remaining on each for an amount of time specified by me, 1 minute on this board, 30 seconds on the next board, 2 minutes on the next and so on.. Javascript is absolutely allowable (though I have little experience with it). My mediums of choice are PHP/HTML and I'm not seeing a way to make this happen cleanly with just them..
There's a bunch of ways you can do this, iv written several scripts and tools with everything from JS to Ruby
In the end It was much easier to use http://dashboardrotator.com . It handled browser restarts, memory allocation and accidental window closure for me with a nice simple GUI.