How can we change the styling of a iframe that is loaded trough JavaScript?
The script is loaded trough:
We would like to hide a navigation bar with class .navbar
Already tried the following but that does not work:
<script type="text/javascript">
window.onload = function() {
let myiFrame = document.querySelector('iframe');
let doc = myiFrame.contentDocument;
doc.body.innerHTML = doc.body.innerHTML + '<style>.navbar {display:none !important;}</style>';
}
</script>
Any ideas?
Related
My google map works fine on my site:
<iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en"></iframe>
I should to change it, because of GTmetrix. So I decide to load it when page is loaded, here is my new code that doesn't load the map.
<iframe id='iframe1' ></iframe>
<script>
window.addEventListener("load", function() {
document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
});
</script>
Note: here is my problem with Gtmetrix, just sharing to complete my question:
There are 5 static components without a far-future expiration date.
https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=fa&callback=onApiLoad
https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i10787022&2i6603899&2e1&3u16&4m2&1u543&2u300&5m5&1e0&5sfa&6sus&10b1&12b1&client=google-maps-embed&token=64085
https://khms1.googleapis.com/kh?v=862&hl=fa&x=5267&y=3224&z=13
https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71592679292299&2d51.45263317535978&2m2&1d35.73212757327154&2d51.488170370963076&2u16&4sfa&5e0&6sm%40496000000&7b0&8e0&11e289&callback=xdc._ng5r7i&client=google-maps-embed&token=4563
https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71552264420163&2d51.46028412421049&2m2&1d35.73193943495472&2d51.48040793223049&2u13&4sfa&5e2&7b0&8e0&11e289&callback=xdc._iyqfq0&client=google-maps-embed&token=32784
There is 1 redirect
https://maps.google.com/maps?... redirects to https://www.google.com/maps/embed?...
Using your code:
<iframe id='iframe1' src="about:blank"></iframe>
<script>
window.addEventListener("load", function() {
document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
});
</script>
There is a message in the javscript console:
Refused to display 'https://www.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z%3D14&ie=UTF8&output=embed&hl=en' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
However, if the <iframe> is created dynamically also, it works (note that the source is set before it is appended to the DOM):
<script>
window.addEventListener("load", function() {
var iDiv = document.createElement('iframe');
iDiv.id = 'iframe1';
iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
document.getElementById("anchor").appendChild(iDiv);
});
</script>
code snippet:
<div id="anchor"></div>
<script>
window.addEventListener("load", function() {
var iDiv = document.createElement('iframe');
iDiv.id = 'iframe1';
iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
document.getElementById("anchor").appendChild(iDiv);
});
</script>
I am not a JS expert so any help on this would be appreciated. I have the below script that needs to run on the page, the first is a fix to prevent a white flash when the next iframes are loaded. The last portion of the script will load an iframe depending on css media screen (different size iframe for different view ports). Problem is that both, when combined, use an onload function and because there are two, only the last one is being applied and thus renders the first onload useless.
Any ideas on how I can get both of these to work?
The code:
<script type="text/javascript">
// Prevent variables from being global
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>"
var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>"
var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>"
}
</script>
Thanks,
B
You can call it all in one function, like this:
<script type="text/javascript">
// Prevent variables from being global
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
var el1=document.getElementById("frameContainer");
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"></iframe>";
var el2=document.getElementById("frameContainer_medium");
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>";
var el3=document.getElementById("frameContainer_small");
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\"> </iframe>";
var el4=document.getElementById("frameContainer_very_small");
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\"> </iframe>";
};
})();
</script>
By the way, you are missing some ";".
I need to be able to show an advertisement banner using JavaScript while the page is loading (before other HTML elements are loaded). I've tried the following, but it only loads a few seconds after the rest of the body content has loaded:
document.onreadystatechange = function () {
if (document.readyState != 'uninitialized') checkCookie();
}
How should I go about making the ad load before the other HTML elements? Thank you!
first you can set
body { display: none; }
and then call the preload function to load all the required images. like this
preload('image1.jpg,image2.jpg,image3.jpg');
and at the end of function you can change style of body tag to make it visible again.
.visible { display: block; }
function preload(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for(i=0; i<=imageArray.length-1; i++) {
//document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
imageObj.src=imageArray[i];
}
// ------ add class to body tag to make it visible again
var d = document.getElementsByTagName("body")[0];
d.className = d.className + " visible";
}
}
You can execute JavaScript is in a script tag before the document is parsed:
<head>
<script>
// your script here
alert(); //for example
</script>
</head>
hi i am trying to get inner HTML of iframe element
my html document a structure is like this
<body>
<div>
<iframe id="frame1">
<html>
<button id="mybutton">click me</button>
</html>
</iframe>
</div>
</body>
i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script
var greeting = "hola, ";
document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ;
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
var button = iframeDocument.getElementById("mybutton") ;
if(button ==null)
alert("button is null") ;
i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it.
but i am facing an alert which has button is null but there is button in iframe why i am getting null for this button??
To get the button inside of the iframe, this could work:
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
Obviously, you can navigate to get what you want with iframeDocument, and use .innerHTML as you seem to know. You cannot get the contents of the iframe if the iframe is pointing to a domain other than its parent.
UPDATE:
You need to use the code to get the frame's document and its contents after it's ready, so you should use something like this:
window.onload = function () {
var greeting = "hola, ";
var div1 = document.createElement("div");
var frame1 = document.createElement("iframe");
frame1.id = "frame1";
frame1.onload = function () {
alert("loaded");
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
if (button == null) {
alert("button is null");
}
};
frame1.src = "http://onemoredemo.appspot.com";
div1.appendChild(frame1);
document.body.appendChild(div1);
};
DEMO: http://jsfiddle.net/nqTnz/
The important thing is how the elements are created and appended to the DOM - not just using innerHTML. The onload method of the iframe is to guarantee it's ready. The actual manipulation code won't work in the jsFiddle because the cross-domain problems, but is what you should need.
In jQuery's source code the solution to get the iframe document is like this:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And then you can usually use getElementsByTagName or getElementById to select the DOM-Elements:
var elem;
if (iframeDocument) {
elem = iframeDocument.getElementById('mybutton');
}
Have You tried ????
iframe.srcdoc="<HTML><a id='some_id'>old</a><script>function run(src){eval(src);}</script></HTML>";
And then
iframe.contentWindow.run("document.getElementById('some_id').innerHTML='new content';");
I have the following JavaScript code:
function createNotification(title, body, canDismiss, callback)
{
//create the container
var nContainer = document.createElement("div");
nContainer.setAttribute("id", "note"+title);
nContainer.setAttribute("class","nContainer");
nContainer.className = "nContainer";
//create the title
var nTitle = document.createElement("div");
nTitle.setAttribute("class", "nTitle");
nTitle.className = "nTitle";
nTitle.innerHTML = title;
//if canDismiss is true then add controls
if (canDismiss)
{
var nDismiss = document.createElement("div");
nDismiss.setAttribute("class", "nDismiss");
nDismiss.className = "nDismiss";
nDismiss.innerHTML = "[close]";
nDismiss.onclick = function(){destroyNotification(title);callback();};
nTitle.appendChild(nDismiss);
}
//append the title to the container
nContainer.appendChild(nTitle);
//create the body and append to container
var nBody = document.createElement("div");
nBody.setAttribute("class", "nBody");
nBody.className = "nBody";
nBody.innerHTML = body;
nContainer.appendChild(nBody);
document.body.appendChild(nContainer);
//fade background
fadeIt(title);
}
function destroyNotification(title)
{
//get the specified notification
var note = document.getElementById("note"+title);
//remove the notification
document.body.removeChild(note);
//unfade the background
unfadeIt(title)
}
function fadeIt(title)
{
//create a partially opaque div and append it to the document
var Fade = document.createElement("div");
Fade.setAttribute("id", "fade"+title);
Fade.setAttribute("class","fade");
Fade.className = "fade";
document.body.appendChild(Fade);
}
function unfadeIt(title)
{
//get the specified fade element
var Fade = document.getElementById("fade"+title);
//remove the specified fade element
document.body.removeChild(Fade);
}
I am getting a document.body error. Can anyone please help?
This is the html:
<html>
<head>
<title></title>
<script langauge="javascript" type="text/javascript" src="notification.js"> </script>
<link rel="stylesheet" type="text/css" href="notification.css" />
<script language="javascript" type="text/javascript">
createNotification("The Title", "Some sort of message for our body", true, function(){alert("A Callback");});
</script>
</head>
<body>
</body>
</html>
The error I got from firebug is:
document.body is null
[Break on this error] document.body.appendChild(nContainer);
You're executing the function createNotification before the page is even loaded. The body element doesn't even exist when you call it.
Call the function on the bottom of the page or add a load event [link].
There is property "body" for document object.
document.getElementsByTagName("body")[0].removeChild(note);
When are you executing your code? I mean, when are the methods getting called: after the document has loaded or somewhere before? Also I could not understand one line of code in createNotification:
function nBody.innerHTML = body;
Can you call this method inside the body tag instead of the head tag? Or can you use a window.onload event to call this function?