Lets say you have a main .html:
<!DOCTYPE html>
<html>
<head>
<title>Page One</title>
<script type="text/javascript" src="javaS.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="main">
<h3>Test switching html content inside iframe</h3>
<p>iframe:</p>
<iframe src="" id="iframe1"></iframe>
</body>
</html>
And a secondary .html:
<!DOCTYPE html>
<html>
<head>
<title>Page two</title>
<link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="test">
<h3>Test subject</h3>
<p>subjugate text</p>
</body>
</html>
How would you display the local second .html inside the iframe element of the first .html, using only JavaScript?
I have tried using these snippets:
window.onload = function() {window.frames['iframe1'].location.replace("Secondary.html");}
.
var iframe = document.getElementById('iframe1');
iframe.src = "second.html";
...But these haven't worked. I'm new at this so the answer might be fairly obvious, but any guidance would be very much appreciated!
I use this and it works well:
window.onload = function()
{
document.getElementById('iframe1').src = "Secondary.html";
}
document.getElementsByTagName("iframe")[0].setAttribute("src", "http://your-url.com");
Your second snippet is perfect. You just have to make sure that it runs when iframe DOM element exists - in window.onload.
I just combined the two exampples you had tried to make one working example, see here: https://jsfiddle.net/4p18mxg9/9/
var iframe = document.getElementById('iframe1');
window.onload = function() {
iframe.src = "second.html";
}
Related
I added an image with Javascript to a webpage, but I don't know how to modify it or place it. How can I link CSS to the image, or can I modifiy it without CSS?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PingPongKép</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<script>
function ilonaKep() {
var img = new Image();
img.src = 'img/ilona.jpg';
document.body.appendChild(img);
}
</script>
<p>Let's See the image
<script>
ilonaKep();
</script>
</p>
</body>
</html>
JQuery makes this quite easy. Apply any styling you want on the image in the style quotes of the image
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Lets see the image: </p>
<script>
window.onload = function(){
addImage();
function addImage() {
$('body').append('<img style="any css styling in here" src="img/ilona.jpg">');
}
}
</script>
</body>
</html>
Javascript has the ability to set an element's attribute,
img.setAttribute("style", "background-color: red;");
https://www.w3schools.com/jsref/met_element_setattribute.asp
Alternatively if you don't want inline CSS, you could add the CSS to your CSS file and give the image a class using jquery
$("img").addClass("myImage");
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<script src="app.js"></script>
</body>
</html>
This is my html code and the js I have written is here
const myHeading = document.getElementById('myHeading');
myHeading.addEventListener('click', () => {
myHeading.style.color='blue';
});
It is very simple however for some reason the h1 tag does not seem to be turning blue on click event?
Maybe your dom is not ready when js executed. Try this
document.addEventListener("DOMContentLoaded", function() {
// your code
})
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events
Ok. so i am learning how to make a clock. went to W3schools to check out the code. now i want to mess around with it from military time and so forth. but i cant seem to get the code to work. when i take the code and put it in a JS file. i do not get the code running. If i put it in the HTML as embedded it works? what am i doing wrong here?
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
HTMl is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<h1> Austen's Clock</h1>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
move <script type="text/javascript" src="clock.js"></script> into head of the document
OR
Rewrite you code like this
window.onload = function startTime() {.....
You've included the <script> tag after the first closing </html> tag - there shouldn't be any other elements after that, so they should be ignored.
Move it so that it's the last thing inside the </body> tag.
[FWIW, you code actually does work for me in both Chrome and Firefox on MacOS X. In Chrome at least, the <script> element was automatically moved inside the </body> tag by the browser.]
Recap of the previous replies:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>City Clock</title>
<link rel="stylesheet" href="clock.css">
<script type="text/javascript" src="clock.js"></script>
</head>
<body onload="startTime()">
<h1> Austen's Clock</h1>
<div id="txt"></div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#myiframe')[0].document.execCommand('SaveAs',false,'somexml.xml');
});
</script>
</head>
<body>
<iframe id="myiframe" src="somexml.xml" frameborder="0"></iframe>
</body>
</html>
I know that execCommand only works in IE, but i cant get this to work. All I want is a "save as" dialog, with the iframe content beeing saved. So I want to run the function in the iframe, not on the "main" page.
Thanks
Try this:
var oIframe = $('#myiframe')[0];
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
oDoc.execCommand('SaveAs',false,'somexml.xml'); // this line will work only in IE
See this link for getting the document object of an iframe correctly: http://xkr.us/articles/dom/iframe-document/