JavaScript - Cross Domain Iframe Is Not Traversing

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?

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 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?

Hi,

I have searched and searched...

Is there a way of using the Ajax httpRequest cross domain?

thanks

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, 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,

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?!

I've been working on a site where the content is displayed in an iframe. The iframe content is on a different domain than the iframe itself.

I've already got around the cross-domain problems by creating a file on the parent domain that the iframe content references via another iframe. (which uses parent.parent to skip the permissions issue)

That was all fine and pressing back and forward in the browser navigated back and forward in the iframe (at least in FF, not 100% sure about other browsers)

Then the client wasn't happy that the url in the browser didn't change and pages couldn't be bookmarked. So I created a solution where the parent.parent.location.href was changed to be domain.com/#/path/to/iframecontent.php so that pages could be bookmarked, that works fine but now back and forward don't work, or more specifically the url changes correctly but the iframe content doesn't go back.

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!

Hi,

I'm a bit of a newbie with Javascript. I have an array called "Prods". Here are the different values in that array:

ProductName, HowManyCalories, ProductImage, LinkFromImage, Description, Price, BuyLink

There are a number of products. I'm just wondering how do I use "ProductName" as a product key to output its unique values?

Eg. the ProductName is "Chocolate Spread" - how do I output the "HowManyCalories" and "Product Image" only from the "Prods" array, based on the key "Chocolate Spread"?

Also, how possible is it to functionalise this? eg. getProductValue('Chocolate Spread','Price') - sorry I know this is probably terrible syntax but I how you get the idea...

Many thanks in advance. Your help would be much appreciated!

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.

if I set a cookie for domain=.domain.com

how do I read the cookie for domain=.domain.com, cause the javascript won't no that the cookie even exist? Been running a lot of test on this today, and can't find the right solution.