I'm trying to inject some CSS into an iFrame, and it works fine, except there is a delay before the new CSS takes effect. How can I set priority for iframe CSS?
I use this code for the iframe section:
<iframe id="myiFrame" fetchpriority="low" loading="lazy" width="1024px" height="200px" src="mypage.html"></iframe>
And use this code for styling:
<script>
window.onload = function() {
let frameElement = document.getElementById("myiFrame");
let doc = frameElement.contentDocument;
doc.body.innerHTML = doc.body.innerHTML + '<style>.jeg_header_wrapper{display:none!important}</style>';
}
</script>
Related
I'm trying to load an iFrame into a Wordpress website.
The iFrame should load the table displayed in this link, with all the colors and other styles applied.
However, when I insert the iFrame on my website, it will load the content of the table but not the CSS.
This is how I tried to 'force' load the right CSS, as I suspect the Wordpress theme is overriding the Table CSS:
<script language="javascript" type="text/javascript">
function iFrameHeight() {
var h = 0;
if (!document.all) {
h = document.getElementById('blockrandom').contentDocument.height;
document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if (document.all) {
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = h + 20 + 'px';
var cssLink1 = document.createElement("link");
cssLink1.href = "https://www.gscris.it/lmo/lmo-style.css";
cssLink1.rel = "stylesheet";
cssLink1.type = "text/css";
frames['iframe'].document.head.appendChild(cssLink1);
var cssLink2 = document.createElement("link");
cssLink2.href = "https://www.gscris.it/lmo/lmo-style-nc.css";
cssLink2.rel = "stylesheet";
cssLink2.type = "text/css";
frames['iframe'].document.head.appendChild(cssLink2);
}
}
</script>
<div>Campioni d'amicizia</div>
<iframe onload="iFrameHeight()" id="blockrandom" name="iframe" src="https://www.gscris.it/lmo/lmo.php?todo=&file=Piccamici201819.l98" width="100%" height="600" scrolling="no" align="top" frameborder="0">
Questa scelta non funziona correttamente in quanto il browser utilizzato non supporta gli Inline Frames </iframe>
What am I doing wrong?
This is my website page where the iframe is inserted (scroll to the bottom).
Use HTTPS to serve your css in the iframe. If you open the Chrome Devtools, the following error message can be seen multiple times: Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.
First of all Iframes will not take the external css. as they have there own html head and body tags, Its a separate html document. you cannot override any styles in Iframe. instead you can try attach your stylesheet in the required document and use it in the iframe.
I have the following code, which resize the IFrame depending on the Size of the IFrame Content:
<html>
<head>
<title></title>
</head>
<body>
<iframe src="http://page.html"
id="iframeid" width="600" height="700" scrolling="no" onload="setIframeHeight(this.id)"></iframe>
<script>
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument? ifrm.contentDocument:ifrm.contentWindow.document;
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 +"px";
}
function getDocHeight(doc){
doc = doc || document;
var body = doc.body; html = doc.documentElement;
var height =Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
$('iframe').css('height', $('iframe body').height() + 'px');
</script> </body> </html>
This works fine. The IFrame size is set depending on the size of the imported site
http//:page.html
The problem is that when http//:page.html contains links. When this link is clicked, the iframe size is not updated.
Question is: How to update the iframesize when a link is clicked?
Add an event listener for loads in the iframe to fire your function:
$("iframe").on("load", function() {
setIframeHeight(id);
});
This should work as long as the iframe URL is the same domain as the parent document. If it's not you'll probably run into browser security restrictions which will cause this to fail.
I use the following code to achieve dynamic iframe height:
In the <head>:
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
In the <body>:
<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0"
scrolling="no" onload='javascript:resizeIframe(this);' />
</iframe>
This codes works fine with height increasing only. So, when the content inside the iframe increases in height, the iframe updates its height and increases with it.
The problem is with height decreasing or shrinking. When the content inside the iframe decreases, it doesn't decrease and causing big unwanted white space. This only occurs in Chrome, IE & FF works fine.
Here is my Page
I want to know how to make this code works to auto shrink iframe height when it decreases?
Screenshot one:
Screenshot two:
Update 1
I placed the following code in the <head>
<script src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
The iframe code in the <body>
<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0"
scrolling="no" /></iframe>
The iframe not showing in the page. It appears for one second and then disappears.
Update 2
I think The problem was the $ character before (function(){, I removed it. I'm sorry I don't have much experience with jquery. I updated the page and removed the onload="resizeFrame()" but the iframe doesn't act dynamically now.
Problem Solved
I was digging in the internet and I found a code solved the whole problem for me. I would like to share it so anyone can use it in order to get dynamic iframe height.
First, put the following code between the <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(myiframeid) {
var ifrm = document.getElementById(myiframeid);
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.visibility = 'hidden';
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight( doc ) + 5+"px";
ifrm.style.visibility = 'visible';
}
</script>
<script>(function(run){
for (i=0;i<frames.length; i++) {
var f1 = document.getElementsByTagName('myiframename')[i];
if(!f1 && window.addEventListener && !run){
document.addEventListener('DOMContentLoaded', arguments.callee, false);
return;
}
if(!f1){setTimeout(arguments.callee, 300); return;}
f2 = f1.cloneNode(false);
f1.src = 'about: blank';
f2.frameBorder = '0';
f2.allowTransparency = 'yes';
f2.scrolling = 'no';
f1.parentNode.replaceChild(f2, f1);
}
})();
</script>
Second, the Iframe code in the <body> :
<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%"
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' />
</iframe>
Third and Last, the CSS:
#myiframeid{
width: 100%;
}
Note: You should have Name and ID for the Iframe.
Compatible with all browsers (Chrome, Firefox, IE).
Have a good day!
I wrote a little library that deals with all these issues and keeps the iframed sized when the content changes or the browser window is resized.
https://github.com/davidjbradshaw/iframe-resizer
I thought about it quite a bit, and think I came up with another solution that may resolve your problem from the parent document. Rather than editing the documents in your iframe. However I can't test it due to cross origin policy. Try this out and let me know how it works.
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
Hope this does it for you.
Edit: This fix would require you to remove the onload="" function.
Edit-2: You seem to have combined the two scripts. You have this:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
}
Replace that entire script with this:
$(function(){
var iframeDoc = $('iframe[name="dservers"]').contents().get(0);
$('iframe[name="dservers"]').load(function(){
docHeight = $(iframeDoc).height();
$('iframe[name="dservers"]').height( docHeight );
});
});
And remove the onload="resizeFrame()" from the iframes tag.
Forgive my ignorance of javascript, but I'm trying to create a simple image hover that enlarges the image when you hover your mouse over it. (And no, I don't want to use JQuery. I want to learn this directly in javascript!) My problem is that only the width is specified in the html. The height is omitted so that the image displays proportionally on the page. When I hover over the image with my mouse, the javascript works fine in IE, but in FF, Chrome, Safari, etc. img.offsetHeight gets assigned 0 rather than a proportion of img.offsetWidth.
<script type="text/javascript">
var img=document.getElementById('imageid');
var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
var ratio=thisheight/thiswidth;
var bigwidth=600;
var bigheight=bigwidth*ratio;
function bigImg(x) {
x.style.width=bigwidth;
x.style.height=bigheight;
}
function normalImg(x) {
x.style.width=thiswidth;
x.style.height=thisheight;
}
</script>
<img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="myimage.jpg" alt="image" width="200" >
As you can see from the img tag, height is inferred proportional to width by not being specified. Can someone tell me how I can use javascript to derive thisheight from thiswidth?
this will work for you in all ie FF, Chrome, Safari, etc
<html>
<body>
<img id="imageid" onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="C810623C.gif" alt="image" width="200" >
<script type="text/javascript">
var img = document.getElementById('imageid');
var normsizeimg = img.style.width;
var bigwidth = 600;
function bigImg(x)
{ x.style.width = bigwidth; }
function normalImg(x) { x.style.width = normsizeimg; }
</script>
</body>
</html>
this is why it's easier to do such things with jquery, some browsers keep dimension values in offsetWidth others don't;
here's a tip of how you can get across this problem
var thiswidth=img.offsetWidth;
var thisheight=img.offsetHeight;
//it's non IE browser
if(XMLHttpRequest){
var thisheight=img.clientHeight;
var thiswidth=img.clientWidth;
}
This works fine for me on Firefox (I don't have access to other browsers right now, sorry):
<img id="imageid" src="myimage.jpg" alt="image" width="200" >
<script type="text/javascript">
var img = document.getElementById('imageid');
img.onload = function(){
var thiswidth = img.offsetWidth;
var thisheight = img.offsetHeight;
var ratio = thisheight/thiswidth;
var bigwidth = 600;
var bigheight = bigwidth*ratio;
img.onmouseover = function bigImg() {
img.style.width = bigwidth;
img.style.height = bigheight;
}
img.onmouseout = function normalImg(x) {
img.style.width = thiswidth;
img.style.height = thisheight;
}
};
</script>
The main differences between this code and yours is that:
I'm only accessing the element after it is declared
I'm only accessing its properties after the image loads
I'm also only adding the onmouseover and onmouseout attributes later because it makes the HTML look cleaner, but that's optional.
Update: actually, adding the event handlers later isn't optional, because they use the calculated bigwidth and bigheight, which are only available after the image loads.
Hi I just wondered if this is possible. I have quite a few images on my website and I have made them as small file size as possible. Some of the images are used as a slideshow but there are all loaded in one go. Is there a way using javascript to make the slideshow images load last so that the background images etc load up first and the slideshow loads at the end.
The images are in the main body of the page and are "slideshowified" using javascript.
The code for this images is simple:
<div id="pics">
<img src="images/cs9.png" width="270px" height="270px" alt="teaching"/>
<img src="images/cs1.png" width="200px" height="200px" alt="teaching"/>
<img src="images/cs3.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs5.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs6.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs7.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs4.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs12.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs8.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs10.png" width="200" height="200px" alt="teaching"/>
<img src="images/cs14.png" width="200" height="200px" alt="teaching"/>
</div>
Any idea would be great
Thanks
Edit - See the bottom of this answer, a much better idea came to me
Original Answer
Yes, totally possible. Others have noted plug-ins for doing this, which are great in that they come pre-tested and such, but if you want to do it yourself it's surprisingly easy. You add img elements to the DOM (document object model):
function addAnImage(targetId, src, width, height) {
var img;
img = document.createElement('img');
img.src = src;
img.style.width = width + "px";
img.style.height = height + "px";
target = document.getElementById(targetId);
target.appendChild(img);
}
(I couldn't immediately recall how to set the alt attribute; it may well be img.alt = "...";)
Naturally you'll want to add some error checking to that. :-) So for one of your images, you want to add them to the pics div, so for example:
addAnImage('pics', 'images/cs12.png', 200, 200);
Set up a function to add your images and call it when the page is loaded (either using window.onload or whatever support your JavaScript library, if any, has for doing things a bit earlier than that). For instance, your load script might look like this (I don't typically use window.onload, but it's convenient for an example):
function pageLoad() {
var images = [
{src: "images/cs9.png", width: 270, height: 270, alt: "teaching"},
{src: "images/cs1.png", width: 200, height: 200, alt: "teaching"},
{src: "images/cs3.png", width: 200, height: 200, alt: "teaching"},
// ..., make sure the last one *doesn't* have a comma at the end
];
var index;
// Kick start the load process
index = 0;
nextImageHandler();
// Load an image and schedule the next
function nextImageHandler() {
var imgdata;
imgdata = images[index];
addOneImage('pics', imgdata.src, imgdata.width, imgdata.height);
++index;
if (index < images.length) {
window.setTimeout(nextImagePlease, 200);
}
}
}
window.onload = pageLoad;
On window load, that will load the first image and then schedule the next one to be loaded 200ms (a fifth of a second) later. When that happens, it'll schedule the next, etc., etc., until it's loaded all of the images.
JavaScript libraries like jQuery, Prototype, Closure, etc. typically have various helper functions for this sort of thing.
Updated answer
The above is fine, but it means that you have to completely change how you layout your pages, and you have to intermix content stuff (the image sources and sizes) with your JavaScript, etc. Blech.
How 'bout this: Make all of your image tags that are the same size refer to the same image:
<div id="pics">
<img src="images/w270h270.png" width="270" height="270" alt="teaching"/>
<img src="images/w200h200.png" width="200" height="200" alt="teaching"/>
<img src="images/w200h200.png" width="200" height="200" alt="teaching"/>
...
These would be placeholders. Then, add data attributes to them with the real image source:
<div id="pics">
<img src="images/w270h270.png" data-src="cs9.png" width="270" height="270" alt="teaching"/>
<img src="images/w200h200.png" data-src="cs1.png" width="200" height="200" alt="teaching"/>
<img src="images/w200h200.png" data-src="cs3.png" width="200" height="200" alt="teaching"/>
...
Attributes in the form data-xyz will be valid as of HTML5 (and they work today, they just don't validate).
Now the magic: Once the main load is completed, you walk through the img tags in the DOM, updating their src to make their data-src attribute:
function pageLoad() {
var nodeList, index;
// Get a NodeList of all of the images on the page; will include
// both the images we want to update and those we don't
nodeList = document.body.getElementsByTagName('img');
// Kick-start the process
index = 0;
backgroundLoader();
// Our background loader
function backgroundLoader() {
var img, src;
// Note we check at the beginning of the function rather than
// the end when we're scheduling. That's because NodeLists are
// *live*, so they can change between invocations of our function.
// So avoid going past what is _now_ the end of the list.
// And yes, this means that if you remove images from
// the middle of the document while the load process is running,
// we may end up missing some. Don't do that, or account for it.
if (index >= nodeList.length) {
// we're done
return;
}
// Get this image
img = nodeList[index];
// Process it
src = img.getAttribute("data-src");
if (src) {
// It's one of our special ones
img.src = src;
img.removeAttribute("data-src");
}
// Schedule the next one
++index;
window.setTimeout(backgroundLoader, 200);
}
}
window.onload = pageLoad;
Again, you'll want to add error handling and that's completely untested, but fundamentally it should work.
You can use a jquery Lazy Load plugin
you can use a lazy loading script. A good example is (jquery):
http://www.appelsiini.net/projects/lazyload
In the window onload event, use document.createElement to create images, and element.appendChild to insert them where desired.
I think you could write a javascript that will insert some tags after the page is loaded. In this manner the slideshow won't interfer with main content load.
I think this is quite late (10 years later) 😂😂, but I wrote an adaptation of the first answer.
Assuming you have some images you want to be affected but the rest to load first like:
<!-- Load Earlier -->
<img src="linktoimg">
<!-- Load After DOM loaded -->
<img data-src="linktoimg">
If you noticed, the ones to load later, I used a data-src attribute to specify the src it should use.
Javascript
function pageLoad() {
var $imgList = document.body.getElementsByClassName('img-speed');
// Kick-start the process
var $i = 0;
imgLoader();
function imgLoader() {
var $img, $src;
if ($i >= $imgList.length) {
//Done
return;
}
// Get this image
$img = $imgList[$i];
$src = $img.getAttribute('data-src');
if ($src) {
// It's one of our special ones
$img.src = $src;
$img.removeAttribute('data-src');
}
// Schedule the next one
++$i;
window.setTimeout(imgLoader, 200);
}
}
window.onload = pageLoad;
Uses a bit of jquery though.