How pass data to parent window from iframe? - javascript

I using 3 .asp pages
Page 1 :Parent.asp
page 2 :Subparent.asp
Page 3 :Child.asp
using javascript in the child.asp. I wand to pass data from Child window(iframe) to Parent window
<title>parent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100"
height="100">
<title>subparent.asp</title>
<html>
<body>
<div id ="parentdata"></div>
<iframe name="I1" frameborder="0" scrolling="no" src="Subparent.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<iframe name="I1" frameborder="0" scrolling="no" src="Child.asp" width="100" height="100">
<title>subparent.asp</title>
<html>
<body>
<script language="JavaScript">
{
parent.document.getElementById("parentdata").innerHTML="GET DATA, WORKING"
}
</script>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
In the "Child.asp" i using javascipt. i wand to pass data to the "" of "parent.asp"
is it possible, plz help me
hoping your support

maybe ajax is the best way to do what you need.
but if you still prefer the iframes, you can try:
Parent.asp:
function myFunction(pram1, param2)
{
alert('worked! - param1: '+param1.toString()+' param2: '+param2.toString());
}
Child.asp
top.myFunction(1,2);

for some old-school info on windows and frames: http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/window.html#1200703 which seems, as TeKapa reckons, to still work.

Related

Video will not play when clicking poster attribute on Youtube video

I am trying to get my video to play when I click on the .gif.
I have tried multiple snipits, and coding it myself, but have not found a solution yet.
<div class="video" id="videoplayer">
<img src="images/gifisdone.gif">
<!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div>
Should be fairly simple. Just add a click call to the gif and then load the video. Run the snippet below to test it out.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div>
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>
</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>

Changing iframe src with jquery

I am trying to change my iframe src and reload the iframe with the following code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#changeframe').click(function () {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
</script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>
When I click "Change" on the button nothing happens. What I am doing wrong?
The order does matter.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%" ></iframe>
// Go Last since changeframe hasn't exist yet.
<script>
$('#changeframe').click(function () {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
</script>
If the code is as it is in your example, you need to wrap the jQuery in
$(function() { ... }); or move it below the html since the button
does not exist when the script runs
Look in the console. You MAY not be allowed to change the src of an iframe containing a url from another domain - some browsers like IE can throw a security exception. You could have access denied in the console
Some websites do not allow their pages to be framed. It is not the case in your example but would for example give errors if you try to load google in a frame
$(function() {
$('#changeframe').click(function() {
$('#declinedframe').attr('src', 'http://stackoverflow.com');
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="changeframe" value="Change">
<iframe id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>
Using a link - no need for jQuery (same if the button above was submitting a form, target iframename):
Change
<iframe name="declinedframe" id="declinedframe" class="embed-responsive-item" src="http://forgezilla.com" height="585" width="100%"></iframe>
If you MUST use jQuery for the link give it the ID of changeframe use
$(function() {
$('#changeframe').on("click",function(e) {
e.preventDefault(); // cancel the link
$('#declinedframe').attr('src', this.href );
});
});

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

Loading of an iframe after another

I have two iframes in my web page, and I want to load the second iframe after the first iframe has finished loading. How can I do this? I tried using the settimeout function, but I encountered some problems.
This is my code:
<iframe src="firstiframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe">
</iframe>
<iframe src="secondframe" frameborder="0" widht="100%" marginheight="0" marginwidth="0" scrolling="NO" id="the_iframe2" >
</iframe>
<script>
function resizeIframe(iframeID)
{
document.setTimeout("resizeIframe",1000);
var iframe = window.parent.document.getElementById(iframeID);
var container = document.getElementById('content');
iframe.style.height = container.offsetHeight + 'px';
}
</script>
You can use the jQuery ready function on the frame to see when it's loaded and then set the src url for the second frame. Something like:
$('#firstframe').ready(function() {
$('#secondframe').attr('src', 'http://yourlink');
});
You can do something like this:
$("#firstIframe").load(function (){
$("#secondIframe").load();
});
I would do this with jquery:
First iframe:
<iframe id="iframe1"></iframe>
<div id="loadsecondIframeHere"></div>
<script>
$('#iframe1').ready(function(){
$('#loadsecondIframeHere').html('<iframe id="iframe2"></iframe');
});
</script>
or use $(document).ready()

how to add onclick event to anchor tag that is sitting within iframe?

before clicking this anchor tag I would like to do something else:
anchorref.onlick= function()
{
//do something
//progress to goal.com
return (true);
}
my html looks (something) like this, the point is having an anchor tag witin a button that you would like to do something else first before heading of to the goal.com. The Iframe is pointing to another domain. Or should I maybe create an event handler on the Iframe tag?:
<iframe class="myclass" frameborder="0" scrolling="no" allowtransparency="true" src="http://www.goal.com"
style="width: 55px; height: 20px;">
<html lang="en">
<head>
<body class="ncount">
<span id="tweet-button" class="tb-container"><span class="tb"><a id="btn" tabindex="1"
href="http://www.goal.com"</span>
<img src="someimagesrc" alt="" style="height: 1px; width: 1px;">
</body>
</html>
</iframe>
The HTML tag is not valid inside the IFRAME tag. Place your anchor outside the IFRAME and attach your event to the anchor.
Here I bind the event in the HTML:
<html>
<head>
<script type="text/javascript">
function SetIFrameURL() {
alert('Do something here!?');
document.getElementById("iframe1").src = "http://www.goal.com";
}
</script>
</head>
<body>
HIT ME!<br />
<iframe id="iframe1" class="myclass" frameborder="0" scrolling="no" allowtransparency="true"
style="width: 550px; height: 200px;">
</iframe>
</body>
</html>

Categories

Resources