A simple Hello world function and a button that illustrate the error. Comment out the iFrame - works like a charm. Remove the comments - Fatal error. I am puzzled.
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"/>
</body>
</html>
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
Put your javascript correctly :
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
console.log("Hello world");
}
</script>
</head>
Retype the <iframe> to right syntax.
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
Full Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
function helloWorld() {
alert("Hello world");
}
</script>
</head>
<body>
<button onclick="helloWorld()">Click me</button>
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com">
</iframe>
</body>
</html>
It should works.
Related
how to convert the attached code to ES6 using Queryselector and addeventListener functions // what the new converted code will be ?
<!DOCTYPE html>
<html>
<head>
<script>
function on(){
document.getElementById('myImage').src='pic_bulbon.gif';
}
function off(){
document.getElementById('myImage').src='pic_bulboff.gif';
}
</script>
</head>
<body>
<h2>Turn the pulp on or off !</h2>
<button onclick="on()">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" width="100px">
<button onclick="off()">Turn off the light</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h2>Turn the pulp on or off !</h2>
<button class="btn" id="button_On">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" width="100px" />
<button id="button_Off">Turn off the light</button>
<script>
let btn_On = document.querySelector('#button_On');
btn_On.addEventListener('click', function () {
document.querySelector('#myImage').src = 'pic_bulbon.gif';
});
let btn_Off = document.querySelector('#button_Off');
btn_Off.addEventListener('click', function () {
document.querySelector('#myImage').src = 'pic_bulboff.gif';
});
</script>
</body>
</body>
</html>
Add script at end of the body otherwise, query selector can not find elements because HTML file is yet to lode. There we need to put ... at end.
<body>
<h2>Turn the pulp on or off !</h2>
<button id="btnTurnOn">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" width="100px">
<button id="btnTurnOff">Turn off the light</button>
</body>
const btnTurnOn = document.querySelector('#btnTurnOn');
const btnTurnOff = document.querySelector('#btnTurnOff');
btnTurnOn.addEventListener('click', () => {
document.querySelector('#myImage').src = 'pic_bulbon.gif';
});
btnTurnOff.addEventListener('click', () => {
document.querySelector('#myImage').src = 'pic_bulboff.gif';
});
this is about HTML <object> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
and child.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
but I got this error :
TypeError: document.parentNode is null
so how to access to #square element from child.html in JS ?
Try this -
parent.document.getElementById('square').style.background = e.target.textContent
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<iframe width="400px" src="http://www.w3schools.com"></iframe>
<iframe width="400px" src="http://www.phpacademy.org"></iframe>
<iframe width="400px" src="http://www.jquery.com"></iframe>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
below is code in custom.js
$(window).(on.('load', function () {
alert('All content loaded.');
}));
I want the alert to display when all the three iframes are loaded on the page.
The syntax you used for load is wrong, you should use
$(window).on.('load', function () {
alert('All content loaded.');
});
Write this way
$(window).load(function() {
alert("All content loaded.");
});
I have used jquery color box pop up and it is working fine with Google chrome but not working with Firefox.
I have 3 pages Default.aspx, Default2.aspx & Default3.aspx
Default3.aspx is nested inside Default2.aspx and Default2.aspx is nested inside Default.aspx.
Complete source code is as follows:
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">
<frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0"
scrolling="AUTO" noresize="noresize">
</frameset>
</html>
Default2.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<table style="width:100%">
<tr>
<td>
<iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
</td>
</tr>
</table>
</body>
</html>
Default3.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox.js"></script>
<script type="text/javascript">
function fn_openPopUp(url) {
$.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
}
</script>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
<form>
<div>
<img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
<map name="P1">
<area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
coords="237,196,237,265,400,265,400,196" />
</map>
</div>
</form>
</body>
</html>
Now I am browsing Default.aspx from google chrome then it is working fine but not with Firexfox
Colorbox PopUp will be open, when you remove the attribute target="_top" from in Default3.aspx page.
You can do this:
$('map area[target="_top"]').removeAttr('target');
In the following code, when you click the link it swaps out the iframe src attribute with another video as expected. What I find strange is that it appears to create a history in my browser, allowing me to navigate backward and forward between the two videos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").attr('src', url);
});
});
</script>
</head>
<body>
<iframe id="video" width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
<p><a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a></p>
</body>
</html>
If I update the code, however, by wrapping the iframe in a div and replace the entire contents of that div (as opposed to just changing the src attribute), it swaps out the video with no browser history.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<title>Test</title>
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
var url = $("#link").attr('href');
$("#video").html('<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>');
});
});
</script>
</head>
<body>
<div id="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/eef3bRjYTYg" frameborder="0" allowfullscreen></iframe>
</div>
<a id="link" href="//www.youtube.com/embed/0h6nInv4RY4">Click me</a>
</body>
</html>
Is this expected behavior or can anyone explain to me why it is happening?