|
JavaScript - Sending Data From Iframe To Iframe (cross Domain
Hi there everybody,
I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Similar TutorialsJavaScript code is not traversing via Iframe with Cross Domain. Actually i was assigned with a project, to grab the top page URL, which has many Iframes, which are coming from different domains. The final sub domain has the JavaScript code, which has to grab the top page URL. Can anyone help me out in this???? Hi, I'm currently developing an application (in php) for a website that is to be integrated into their website using iframe. It's imperative that it's done using iframe as I am placing the application on my own server. In short, the iframe element appears on my customer's website (lets say customer.com) - something like this: <iframe width="440" height="500" frameborder="0" scrolling="no" src="http://www.myserver.com/index.php"></iframe> However, it's quite imperative that my application (i.e. what's located at myserver.com/index.php) only can be shown in iframe elements placed at customer.com. That is: I want to make sure that a similar iframe element from another web server (lets say anothercompany.com) has the possibility to iframe my application located at myserver.com. My first idea was to check this using php in my application: by looking at HTTP_REFERER, I can get the location of the page containing the iframe element. That solution seems to work fine. However, as is well known, it is possible to spoof and even hide the http_referer server variable. Still, as I only want to make sure that no other server accesses the application through an iframe object, it should perhaps be an okay solution - if someone wants to access the application from their own browser, and spoofing the HTTP_REFERER variable, I'm fine with that. (I just want to make sure that only customer.com, and not anothercompany.com, can integrate the application with an iframe). The other thought I had was to use javascript and DOM stuff. The idea is then to use javascript to check that the application has a parent frame and that its location is at customer.com. However, as we are dealing with two different domains here, I'm having a lot of problems getting the document.parent.location variable - it's not allowed! Any solutions on how to do this in javascript? Any way to bypass the obstacle above? Or perhaps javascript isn't the best way? My guess is that there is a solution out there somewhere - I guess there are a lot of ads that are integrated into various websites using iframe, and where the actual content (i.e. what's inside the iframe element) can check which server is embedding the ad through an iframe element. Anyone know if there is a way to get the title string from an iframe src coming from another domain?
I read the "http://bodybrowser.googlelabs.com/body.html" page into an Iframe on my page. I now need to print the "viewcontainer" DIV that resides in the iframe. Accessing divs in an iframe is an issue with cross domain sources. Can anyone help me with a workaround or different idea? Thanks in advance!! I'm facing an issue with fetching the page URL from an IFRAME with cross domain. Is there any approach/ any ways to achieve this? I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. All, Trying to append data from an API to the frame source; not loading. master page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" name="mm_scormRTI" >
<!-- Inserted by:
// SCORM Runtime Wrapper
// version 1.2.6 09/09/02
// Copyright 2000, 2001, 2002 Macromedia, Inc. All rights reserved.
// ----------------------------------------------------
// define global var as handle to API object
var mm_adl_API = null;
// mm_getAPI, which calls findAPI as needed
function mm_getAPI()
{blah}
// returns LMS API object (or null if not found)
function findAPI(win)
{bleh }
// call LMSInitialize()
function mm_adlOnload()
{do api stuff- this is where i get ny value }
// get the API, launch it
mm_getAPI();
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DCB Document</title>
</head>
<body onLoad="mm_adlOnload()">this is a test;</p></p></p>
<iframe src="blank.htm" width="100%" height="800" id="qualtrics" name="qualtrics">
<p>Your browser does not support iframes.</p>
</iframe>
</p></p>
<input type="button" name="mm_finishBtn" value="Finish Lesson" onClick="mm_adlOnunload()" />
</body>
</html>
blank.htm: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript">
//test
function loadit(){
var stud = window.opener.mm_adl_API.LMSGetValue("cmi.core.student_id");
var newlink = "https://mylink.com/stud_id=" + stud;
parent.document.getElementById("qualtrics").src=newlink;
}
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DCB meta Document</title>
</head>
<body onLoad="loadit()">this is a test iframe</p></p></p>
</body>
</html>
help? i'm kind of dizzy right now since i've tried X different versions...still working on it. the new URL doesnt load i want to get the stud_id from the API and append it to the url that i launch in the iframe Hello I'm using lytebox to open an iframe, but the iframe url is in another domain that the parent window. i need to close the iframe when user clicks a button. I can do that with javascript : top.$lb.end(); the $lb.end(); starts lytebox scripts in parent window which close the iframe and modify all the css stuff. That works when my iframe url is in the same domain. But when it's in another domain, that does'nt work. Can anyone tells me how to do that ? Starting the $lb.end() function of the parent window ? Thank you. Hey guys. Is there any any ANY way to read highlighted text of in an iframe that is displaying an external server / site? Say you select some text in the iframe and click a button outside of the iframe that prints the selected text to a textbox? Really really would love to do this or any ANY workaround. This really sucks that its a security measure by default that doesn't allow this!! Ugh! Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. I'm working on a image upload script. I have finish the PHP side of things now I'm ready for javascript to do its side of things. I wanting to have no page refresh the only way I know of doing this is pushing the form data to a iframe with the target property. I understand the concept of it but I'm not to sure how to write. Can someone help me out with this? Thank you! Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Hello, I am trying to create an imageuploader for my forum hosted on domain forum.com (fictional domain name) The image uploader is hosted on domain uploader.com (fictional domain name) When the uploader is done i want info to be passed from the uploader to the texteditor on the forum using javascript. I tried everything i could think of with document.getElementById but to no avail. The element on the forum is clickableEditor.textarea Is it possible and if so, can someone please help me out? Hi All, I'm writing this post as there are alot of questions about Cross Domain AJAX request so i'm going to give an overview of the different ways and the best practices Ok so there are 2 systems for this the key difference is how much control you have. If you control the Requested site you can use Javascript Safe calling to that server, this is all done via a few Headers so to do this all you have to do is send some headers from the page your requesting. The first is tell the browser that the site the AJAX call is coming from is allowed this is done with "Access-Control-Allow-Origin: " Now this can be set to a wild card and allow all sites to access the page "Access-Control-Allow-Origin: *" Or you can say only a set server can "Access-Control-Allow-Origin: mydomain.com" This header allows GET requests but what if you need to post data to the site well you need to tell the browser that POST data is allowed to be sent Access-Control-Allow-Headers: GET,POST Now we run into the problem that sending post data the browser will send the header Content-Type but your server has not told the browser its allowed to send that header so Access-Control-Allow-Methods: Content-Type Will allow the header to be sent if you wish to send any other custom headers you have to make your server tell the browser its allowed to send them this is done by adding them as a comma delimited list via the "Access-Control-Allow-Headers" header Now if you dont have control well then your back to using a script that is local to the AJAX script then sending the data via cURL or another connection method to the remote server Please note i will be uploading examples in php later. Example Scripts Remote Server PHP Code: header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: GET,POST"); header("Access-Control-Allow-Methods: Content-Type"); $output = array( 'response' => 'hello world!', '_GET' => $_GET, '_POST' => $_POST, ); echo json_encode($output); Client Script -- please note built for Google Chrome PHP Code: var getExample = new XMLHttpRequest(); getExample.open("GET", "http://www.test.com/remote.php?test=set", true); getExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); } getExample.send(null); var postExample = new XMLHttpRequest(); postExample.open("POST", "http://www.test.com/remote.php?test=set", true); postExample.onreadystatechange = function(requestHandle){ console.debug(requestHandle); } postExample.setRequestHeader("Content-Type", "x-www-urlencoded-data");// this is sent to prevent the requested server not saving post data postExample.send("?set=test"); If you are unable to Edit files on the remote server you can use the link provided by Kor http://www.troywolf.com/articles/ This will give you all the information you require to use php to talk to the remote server (basic proxy in effect) Hi, I have searched and searched... Is there a way of using the Ajax httpRequest cross domain? thanks hi, my working project (needs a proxy): http://www.mypubspace.com/dashtest/order.html currently working through this tutorial, I have setup a proxy and saved it as proxy.php http://www.wait-till-i.com/2010/01/1...query-and-yql/ I just need to put this piece of code in my JavaScript but not sure where?! Code: var url = $(this).attr('href');
if(url.match('^http')){
url = 'proxy.php?url=' + url;
}
here is my project code Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
countyRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
please help?! hi, in my page he http://www.mypubspace.com/dashtest/order.html I would like this working Cross Domain and output in JSON? Can anyone please help me? thanks code: Code: <html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var townRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
townRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
townRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
townRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
townRequest.onreadystatechange = function(){
if(townRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = townRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
townRequest.open("GET", "http://www.mypubspace.com/dashtest/townpubs.php" + queryString, true);
townRequest.send(null);
}
function countyFunction(){
var countyRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
countyRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
countyRequest.onreadystatechange = function(){
if(countyRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = countyRequest.responseText;
}
}
var name = document.getElementById('name').value;
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
var queryString = "?name=" + name + "&county=" + county + "&town=" + town;
//Add the following line
countyRequest.open("GET", "http://www.mypubspace.com/dashtest/countypubs.php" + queryString, true);
countyRequest.send(null);
}
function townlistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxTownlist');
var county = document.getElementById('county').value;
var town = document.getElementById('town').value;
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
function countylistFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxCountylist');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true);
ajaxRequest.send(null);
}
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<a href="#" onClick="townlistFunction();">show towns list</a>
<a href="#" onClick="countylistFunction();">show counties list</a>
<form name='myForm'>
<div id="ajaxTownlist"></div>
<div id="ajaxCountylist"></div>
<input type='hidden' id='name' />
<input type='hidden' id='county' />
<input type='hidden' id='town' />
</form>
<div id='ajaxDiv'></div>
</body>
</html>
Hi guys. I want to create login form similar like facebook login which web owner can put the script and it will become login for their web and also it will auto register at their web. I believe it need to use javascript because javascript is cross platform. Can someone give me a clue for me to start on? |
|||||||