How to load iframe exactly one time if onload is present? - javascript

I am trying online on the fly when page reloads based on the userid. For that I am doing
<body>
<iframe frameBorder="0" id="res" src="" height="500" width="500" onload="doit()"></iframe>
</body>
<script>
function doit(){
var t = location.search.split('=')[1]; // get userid from the current page
document.getElementById('res').src="./profile/?id="+t;
}
</script>
but the problem is it will keep recursive querying the /profille/?id={id} due to onload . I need to fire onload exactly one time after body is loaded. How is it possible?

Add flag to save loading state
<script>
var loaded = false;
function doit(){
if (loaded) return;
var t = location.search.split('=')[1]; // get userid from the current page
document.getElementById('res').src="./profile/?id="+t;
loaded = true;
}
</script>

Related

javascript : to fetch iframe element ,but it can not get the value

i try to fetch the frame head value ,but it doesn't work well,look at the following code
1.php
<iframe src="/admin/" ></iframe>
<script type="text/javascript">
// var a =
a = window.top.frames[0].a
alert(a)
</script>
/admin/index.php
<script type="text/javascript">
document.cookie = 'a=asdf';
a = 'asdf'
</script>
Look the result
when i open http://127.0.0.1/1.php in firefox or chrome it become that followings
open in browser
but when i execute it in the console it come into that
enter image description here
so My question is Why my code can't get the value of Tag iframe
You need to wrap your code under window load function or may be iframe load because iframe takes some time to load and you have to wait for it to be fully loadded.
<iframe src="/admin/" ></iframe>
<script type="text/javascript">
window.onload=function(){
// var a =
a = window.top.frames[0].a
alert(a)
}
</script>

Loading gif not waiting for iFrame to load?

I want a loading .gif to display until everything has loaded including an embedded iframe. However, currently the loading gif disappears once everything has loaded apart from the iframe. How can I get it to wait until the iframe has loaded too?
Currently using this:
<script>
$(window).ready(function() {
$('#loadinga').hide();
});
</script>
Thanks
<iframe name="xyz"></iframe>
<script>
var expectedLoadCount = 2;
function checkEverythingLoaded() {
expectedLoadCount--;
if (expectedLoadCount > 0) return
$('#loadinga').hide();
}
$("#xyz").on("load", checkEverythingLoaded);
$(window).ready(checkEverythingLoaded);
</script>
suppose your iframe id is iframeId
then try with this-
<iframe id="iframeId" src="..."></iframe>
<script>
document.getElementById('iframeId').onload = function() {
$('#loadinga').hide();
alert('iframe is loaded');
};
</script>

iframe src to be massaged by javascript

To say that I am a novice in javascript is an insult to a novice. Even my limited HTML knowledge is self-taught. Here's my problem: I am trying to massage the src in a simple iframe, like so:
<html>
<head>
<script type="text/javascript">
function embedKey() {
var url = window.location.href;
var symbol = url.split('?')[1];
if(symbol=="INNO"){
uniqueKey = "&resid=27A14C5DE396792C%21235&authkey=ANDfOBKrOKskLqg"
return "https://skydrive.live.com/embed?cid=27A14C5DE396792C" + uniqueKey +"&em=2&wdAllowInteractivity=False&ActiveCell='Sheet1'!B3&wdHideGridlines=True&wdHideHeaders=True"
}
else {
alert(url);
return false;
}
}
</script>
</head>
<body>
<iframe width="402" height="346" frameborder="0" scrolling="no" src=javascript:embedKey();></iframe>
</body>
</html>
I will be adding many more conditions/symbols/return strings to the embedKey() function. Right now, I am trying to make it work with one.
I don't think JavaScript gets executed from a src attribute like that. With something like an href attribute on an a element (where one often sees inline JavaScript) there's at least a click event to respond to, but not in this case.
Instead of trying to call the function inline from the element like that, call it from a script block after the element has loaded. Something like this:
<iframe width="402" height="346" frameborder="0" scrolling="no" id="someIframe"></iframe>
<script type="text/javascript">
document.getElementById('someIframe').src = embedKey();
</script>

Accessing JavaScript variable in an iframe, from the parent window on same domain

I am fairly new to JavaScript and I am trying to get value of a variable from an embedded iframe. I have resorted to basic testing to make sure I am getting the method right...
I have tried the common suggestions and everything returns 'undefined'. I want to use the variable in an onclick event.
In the iframe content I have stripped everything and just for testing have this:
<script>
var test = "test";
</script>
in the parent window I have done this:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
var myVar = window.frames[0].window.test;
</script>
Click
I have tried the options suggested here: grab global variable from an embedded iframe
Everything I do returns undefined... am I doing something fundamentally wrong?
Thanks in advance..
You are already executing the script when the <iframe> is still loading, so it's test is undefined. Either wait for the iframe's load event, or just get the variable when clicking:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
var myFrame = window.frames[0].window;
</script>
Click
You're apparently not waiting for the frame's content to be loaded before accessing myVar. Chances are the <script> element in the frame has not yet been fetched or executed when you do that.
Try delaying the variable assignment until the frame's content is fully loaded:
<iframe src="iframe.html" id="iframe" onload="frameLoaded();" width="200" height="100"></iframe>
<script>
var myVar;
function frameLoaded() {
myVar = window.frames[0].window.test;
}
</script>
As an aside, since your question is tagged jquery I would suggest you write something like:
<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>
<script>
$("#iframe").on("load", function() {
var myVar = this.window.test;
$("#link").on("click", function() {
alert(myVar);
});
});
</script>
try to use this
<iframe src="iframe.html" id="iframe" onload="loader()" width="200" height="100"> </iframe>
<script>
var myVar
function loader(){
myVar = window.frames[0].window.test;
}
</script>
Click
In the aside solution I just wanted to point out that when you use the jquery onload event handler function and you want to access the jquery "this" object you have to use the $(this.attr) notation.

Redirecting page based on script outcome

I'm working on the following script. Basically I want to redirect a page to one of two choices, based on whether the browser has allowed a popup. I know that the following won't work because window.location needs to be called as the DOM loads, but I'm wondering if there is something I can use or if I need to rethink my approach
<script type="text/javascript">
function openwindow(){
var w = window.open("{INTERACTION}","interaction","resizable=0,width=800,height=600,status=0");
if(w){window.location = "carry on.html"};
if(!w){window.location = "blocked.html"};
}
</script>
</head>
<body>
<form>
<input type="submit" class="button" onClick="javascript: openwindow()" value="Begin" />
</form>
Thanks in advance
Giles
It isn't necessary to call it as the DOM loads. it works both when DOM is loading and when it is fully loaded:
<script>
window.onload = function(){
window.location = "http://google.com";
}
</script>
// during DOM loading:
<script>
window.location = "http://google.com";
</script>

Categories

Resources