How do I make an iframe load all parent window's scripts?
I was thinking something like this:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="somethingelse.js"></script>
</head>
<body>
<iframe>
<html>
<head>
<script>
for (var i=0;i<window.parent.document.scripts.length;i++){
var script = window.parent.document.scripts[i];
//now it should append 'script' to document.scripts (this iframe scripts array)
}
</script>
</head>
<body>
</body>
</html>
</iframe>
</body>
</html>
PS: I made it as simple as possible. The real code is much bigger.
Try:
for (var i in window.parent.document.scripts){
var parentScript = window.parent.document.scripts[i];
var newScript = document.createElement('script');
if(parentScript.src)
newScript.src = parentScript.src;
if(parentScript.innerHTML)
newScript.innerHTML = parentScript.innerHTML;
document.head.appendChild(newScript);
}
Related
When I load this page the script is not loading for some reason. What am I doing wrong here?
<html>
<head>
<title>hi</title>
<script language="JScript.Compact">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://192.168.1.106/js/min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
</html>
I think it is working but the alert doesn't get triggered because the script you refer to isn't loaded. Try it like this:
<!DOCTYPE html>
<html>
<head>
<link media="screen" href="style.css">
</head>
<body>
<p>…</p>
<img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">
<script>
window.onload = function () {
console.log('Document loaded.');
function init();
function dosomething();
}
</script>
</body>
</html>
<script language="JScript.Compact">
The language attribute is obsolete, but browsers still support it.
Since you set it to an unrecognised language, browsers don't know how to execute it, so they ignore it.
Remove the language attribute.
I want to find the load time of a locally hosted website. Is this way efficient? How can I display the time in a dialogue box?
<head>
<script type="text/javascript">
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
</script>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var loadTime = ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
console.log('Page load time is '+ loadTime);
}
</script>
</body>
#Samrat Shrestha This snippet work for you
<doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<head>
<script type="text/javascript">
$(document).ready(function() {
console.log("Time until DOMready: ",window.performance.timing.loadEventEnd-window.performance.timing.navigationStart);
});
</script>
<!-- do all the stuff you need to do -->
</head>
<body>
</body>
</html>
The ready event occurs after the HTML document has been loaded.
window.onload fires when the entire page loads (images, styles, etc.)
window.onload vs $(document).ready()
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API#Examples
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/loadEventEnd
I have the following snippet:
<html>
<head>
</head>
<body>
<form>
<div id='mydiv'>
</div>
</form>
</body>
</html>
I want to add "recaptcha" inside #mydiv usign a javascript code given at https://developers.google.com/recaptcha/docs/display just before </body>:
I tried to use the following code:
<script>
var mydiv = document.getElementById('mydiv');
var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I-W9HOm0RQgV0';
mydiv.appendChild(script);
</script>
But it doesn't work. It only paste the script code. It doesn't run it.
Do you have any idea how to do this?
Thanks.
Here you go taken from the example code on your link see fiddle,
http://jsfiddle.net/GVwZ4/1/
in a div
http://jsfiddle.net/GVwZ4/2/
<body>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LeZBs8SAAAAAFnpP1frAONoZH-I- W9HOm0RQgV0">
</script>
<div></div>
</body>
I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)
I'm trying to include a separate .js file so I can pull in a class I created but it doesn't work, can someone tell me why?
playercharacter.js
function PlayerCharacter() {
this.x = 0;
this.y = 0;
this.dx = 5;
this.dy = 5;
}
PlayerCharacter.prototype.sayHello = function()
{
alert ('hello');
};
index.html
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
You forgot wrap your JS-code into the <script> tags
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
Your JavaScript code is not in a script tag.
<script>
var player = new PlayerCharacter();
player.sayHello();
</script>
You need to surround the code in the body with a <script> tag.