Can one set an iframe's src and manipulate its contents afterwards? - javascript

My goal is to have a parent page change the src of an iframe from blank to its proper url (as to utilize an onload handler in the iframe at a given point, but that's beside the point) and then manipulate the iframe's contents. However, javascript seems oblivious to any elements of an iframe that aren't on its src when the DOM loads. Is there any way around this?
The setTimeouts are intended to allow the DOM and iframe to load.
edit:fixed some stuff.
Here's the containing page:
<html><head>
<script type="text/javascript">
var done = false;
var theIframe;
window.onload = function () {
setTimeout('stuff()', 2000);
clearTimeout('stuff()');
}
function stuff() {
if (!done) {
theIframe = window.myiframe;
theIframe.src = 'http://localhost/TestStuff/redirectIframe.jsp';
done = true;
stuff();
} else {
theIframe.setMe = true;
}
}
</script>
</head>
<body>
<iframe src="" width="500" height="500" id="myiframe" name="myiframe">
</iframe>
</body>
And here's the iframe:
<html>
<head>
<script type="text/javascript">
var setMe = false;
window.onload = setInterval('checker()', 1000);
function checker() {
alert('hi');
if (setMe) {
window.onload = null;
top.location = 'http://www.google.com';
alert('foundit');
} else alert('a');
}
</script>
</head>
<body></body>
</html>
Any ideas?

In this piece of code:
theIframe.src = ...;
stuff();
you're calling stuff() immediately, contrary to what you have described, so in fact you're not allowing any time for the page to load. Maybe you're confused about how setTimeout works: it just schedules a single execution after the specified time, it doesn't automatically delay all calls to a function.
Also, you can use clearTimeout only with a previous ID returned by setTimeout, not with code as you have now.
Try something like this:
window.onload = function() {
loadFrame();
}
function loadFrame() {
theIframe = ...;
theIframe.src = ...;
setTimeout(setSomething, 2000);
}
function setSomething() {
theIframe.setMe = true;
}

Related

Is there a race condition to remove the elements?

I'm very new to JS and HTML. I would like to remove an element from the page as soon as the page is loaded. This is my simple HTML code:
<html>
<head>
</head>
<body>
<div id="trapParent"><a id="trap" href='/trap/removeByJS'> Javascript removal </a></div>
<script>
function timeout() {
setTimeout(function () {
timeout();
}, 1000);
}
timeout();
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
while (child & parent){
parent.removeChild(child);
parent = undefined;
child = undefined;
}
</script>
</body>
</html>
But when I open the page I can still get a reference to the link on the page; when I get the value of document.getElementById('trap');, it returns the link which means that it is still in the DOM and I can see that the link is still there. Am I missing something here?
I added the timeout function to make sure that the script will run after the page is loaded.
Thanks to above answers, the following worked for me:
<html>
<head>
</head>
<body onload = "removelink();">
<div id="trapParent"><a id="trap" href='/trap/removeByJS'> disables Javascript </a></div>
Hey!
<script>
function removelink( ){
var parent = document.getElementById('trapParent');
var child = document.getElementById('trap');
while (child && parent){
parent.removeChild(child);
parent = undefined;
child = undefined;
}
}
</script>
</body>
</html>

Dynamic loading of javascript causes target to iframe corruption

I am rendering a page which dynamically creates an iframe as part of the page. Content renders in the iframe when it is created. I also have a link which "targets" the iframe for rendering additional pages.
The code that renders inside the iframe dynamically loads javascript. However, when you click the link which targets the iframe name, instead of the content rendering in the iframe, a new window is created as though target="blank". If I comment out the dynamic loading of the javascript the link target= works fine every time.
As far as I can tell I am doing the dynamic loading properly. The js code loads and executes properly. However, I'm not sure what is happening to the DOM to foul up the target. Any help would be appreciated.
page1.html:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var ifr = "<iframe width='998' name='main'
id='main' src='page2.html' scrolling='no'
frameborder='1' height='100'></iframe>";
$(document).ready(function() {
$("#content").html(ifr);
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 60 + 'px';
});
});
</script>
<body>
<div id="wrapper" style="height: 100px;">
<p>Click Me</p>
<div id="content">
</div>
</div>
</body>
page2.html:
<script type="text/javascript">
// var ScriptLoaded = true;
if (typeof ScriptLoaded == 'undefined') {
var scripts = ["js/jquery-1.6.2.min.js"];
for (i=0; i<scripts.length; i++) {
var name = scripts[i];
loadScript(name, function() {
});
}
};
window.onload = waitForLoad();
function loadScript(name,callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readyState) { // IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" ||
script.readyState == "completed") {
script.onreadystatechange = null;
callback();
}
}
} else { // Other
script.onload = function() {
callback();
}
}
script.src = scripts[i];
document.getElementsByTagName("head")[0].appendChild(script);
};
function waitForLoad() {
if (typeof jQuery == "undefined") {
setTimeout(waitForLoad,500);
}
};
</script>
<body>
<div class="page">
this is in an iframe
</div>
I've looked for a natural solution, but there does not seem to be one.
target="someIframe" does not like it when the iframe is dynamically created. Here is a workaround you could place after creating the iframe:
$('a[target="main"]').click(function(ev){
var src = $(this).attr('href');
$('#main').attr('src', src);
ev.preventDefault();
});
It will select every link that has the iframe as a target, and when you click on them, it will get their href, set it as the iframe's src, and prevent the link from opening in a new window.

Use a button to call a javascript file in HTML [duplicate]

This question already has answers here:
Using an HTML button to call a JavaScript function
(8 answers)
Closed 8 years ago.
I am trying to create a button that if I press on it my javascript file gets called.
The java script file has many functions so I wasn't sure how to call the functions.
This is how I call the javascript file in my html document.
<script src="sketch2.js">
</script>
Thank you
<script src="sketch2.js">
</script>
this is how you include a javascript file in html. to call all the functions in it, make a function which would call all those functions and call this function on button click.
Then add an inline script containing a Javascript function to call the functions
<script>
function newfunction(){
fun1();
fun2();
...
}
</script>
Then in the HTML you need
<button onclick="newfunction()">click here</button>
Do it like below:
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>
Create a Button and bind your javascript function to the onclick event. Like this:
<button onclick="functionCall()">
Do Something
</button>
But you cant just call the whole script file. Ask yourself this question: how should the browser know, which method to call.
In my litte example, it worked:
<html>
<head>
<script>
function functionCall(){
alert('hi');
}
</script>
</head>
<body>
<button onclick="functionCall()">Do Something</button>
</body>
</html>
HTML like this:
<button id="myButton">Click me</button>
Save this in your Javascript file, include the script at the bottom of the html page:
(function () {
document.getElementById("myButton").onclick(function () {
// do whatever it is you want to do after the button's been clicked
});
}());
It shall work regardless of what JS Library you happen to be using (if any)
This can all be simply handled in require.js, but here is a very simple implementation.
<div id="btn">Click to load</div>
var btn = document.getElementById('btn');
var loaded = false;
btn.addEventListener('click', function(e) {
if(loaded) return;
loaded = true;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'sketch2.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
if(window.addEventListener) {
script.addEventListener('load', function(e) {
// now you can access the functions inside the JS file
});
} else {
script.onreadystatechange = function() {
if(this.readyState === "loaded" || this.readyState === "complete") {
// access the functions in the JS file
script.onreadystatechange = null;
}
};
}
});
$(" the id or class of the button ").click(function(e) {
var url = "(your url)sketch2.js";
$.getScript( url, function() {
//function or something..
});
This is you are looking for:
<div class="whatever" onclick="yourfunction()" >Your Button</div>

Run javascript function only for one time (first page load)

I'd like to run this javascript function only for one time (first page load). Is it possible? Thank you
<div id="pag">
<script type="text/javascript">
var framekiller = true;
window.onbeforeunload = function () {
if (framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
</div>
You should use global variables in javascript.
<script type="text/javascript">
window.framekiller = true;
window.onbeforeunload = function () {
if (window.framekiller) {
return "Click on stay on this page";
}
};
</script>
<iframe scr="http://www.example.com/page-with-javascript-framebuster.html"></iframe>
And put somewhere else, another javascript snipper, who turn this variable into false, and do other things.. eg opens a new link?
To turn it back to false, use:
window.framekiller = false;

Conditional loading of jQuery

I am testing with pure JavaScript if browser seems to support HTML5 and if so, I want to load jQuery and then process the rest of page. If not, some redirection will occur.
<script type="text/javascript">
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext && canvas.getContext('2d')) {
var s = document.getElementsByTagName('script')[0];
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.src = 'js/jquery.js';
s.parentNode.insertBefore(jq, s);
}
else {
// ... redirection ...
}
</script>
<script type="text/javascript">
$(function () {
//...
}
</script>
But the code above is not working properly, because I got error
Uncaught ReferenceError: $ is not defined
which is clearly saying that jQuery library has not been loaded.
Why? What is wrong with conditional script loading in my code above?
This is a case where it may make sense to use document.write(). You'd need to put this code in the <body> instead of the <head>:
<script type="text/javascript">
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext && canvas.getContext('2d')) {
document.write( '<script src="js/jquery.js"><\/script>' );
}
else {
// ... redirection ...
}
</script>
<script type="text/javascript">
$(function () {
//...
}
</script>
Or, you may be able to use an ordinary <script> tag to load jQuery, but put it after your conditional redirection:
<script>
var canvas = document.createElement('canvas');
if( !( canvas && canvas.getContext && canvas.getContext('2d') ) ) {
// ... redirection ...
}
</script>
<script src="js/jquery.js"></script>
<script>
$(function () {
//...
}
</script>
With either of these approaches, the order of execution is:
The first <script>.
The loading of jquery.js, whether done with document.write() or a simple <script> tag.
The final script.
When you insert a script tag like you are, it will be loaded in the background, not immediately and thus your next script will run before jQuery is loaded. You will need to attach a listener such that you know when jQuery is successfully loaded and you can then run your scripts that use jQuery.
Here's an article that describes how to know when a dynamically loaded script is loaded: http://software.intel.com/en-us/blogs/2010/05/22/dynamically-load-javascript-with-load-completion-notification.
FYI, in your specific case, you also could just have a static script tag that loads jQuery, but place your script that detects whether to redirect or not BEFORE the jQuery script tag. That would be the simplest option.
<script type="text/javascript">
var canvas = document.createElement('canvas');
if (!canvas || !canvas.getContext || !canvas.getContext('2d')) {
// redirect here or whatever
}
</script>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(function () {
//...
}
</script>
finally working like a charm, I'm relieved myself !
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript">
window.onload = function(){
var jqu = "$(console.log('worked'));";
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext && canvas.getContext('2d')) {
var s = document.getElementsByTagName('head')[0];
var jq = document.createElement('script');
jq.setAttribute('type','text/javascript');
jq.innerHTML = jqu;
var jqLoad = document.createElement('script');
jqLoad.setAttribute('type','text/javascript');
jqLoad.setAttribute('src','jquery-1.10.0.js');
jqLoad.setAttribute('id','jqloader');
s.appendChild(jqLoad);
document.getElementById('jqloader').onload = function(){
console.log('loaded');
s.appendChild(jq);
}
}
else {
// ... redirection ...
}
console.log(document);
}
</script>
</head>
<body>
</body>
</html>
jsbin Demo
explanation :
1- using dom functions to append or insert elements are always the best (dynamic and safer more than anything else), and document.write is not recommended over that.
2- at parse-time, whatever functions you have in your script will be evaluated thus you will get an error if you have the script and not loaded the library yet.
3- loading the library and executing the relevant script in the same tag is not recommended. better do the script in another tag (after loading is done completely) to ensure it will work.
4- events for document.onload ensures that the document is loaded and the doms exist so you can append children to them. as for the document.getElementById('jqloader').onload it was just to insure that the jquery library is loaded completely and added to the document, and only then the script will be added after and evaluated.
As others have said, the reason you're getting an error is because you've loaded jQuery asynchronously and it hasn't loaded yet.
There are two ways to accomplish what you want.
You can poll for window.jQuery, or you can use an asynchronous loader callback.
Since you only load jQuery only when you detect canvas support, you won't have to worry about supporting old browsers.
var async_script_load = function (s, callback) {
var script;
script = document.createElement("script");
script.async = "async";
if (s.scriptCharset) {
script.charset = s.scriptCharset;
}
script.src = s.url;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function () {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
// Remove the script
if (head && script.parentNode) {
head.removeChild(script);
}
// Dereference the script
script = undefined;
callback(200, "success");
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore(script, head.firstChild);
};
async_loader({url:'http://tempuri.org/jquery.min.js'},function() {
//call jquery here.
});
For a polling method, it's as simple as:
var checkJq = function() {
if(window.jQuery) {
//do jQuery
} else {
setTimeout(checkJq,100);
}
}
setTimeout(checkJq,100);

Categories