|
JavaScript - Bookmarking & History - Cross Domain Javascript & Iframes
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. Similar TutorialsI'm facing an issue with fetching the page URL from an IFRAME with cross domain. Is there any approach/ any ways to achieve this? The question is on iframes/bookmarkablity and back button functionality. This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar. The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful. Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue. Gmail and other sites looks like they does something like 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? JavaScript 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, 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, 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 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) Anyone know if there is a way to get the title string from an iframe src coming from another domain?
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. 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 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. 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? Hi I am using back button with javascript:history.back(); on it but the page I want to go back have anchor link smth like: http://example.com/index.php#anchor_link How do I go back ? I've tried javascript.history.go(-1); a I have a stupid problem... Page 1 and Page 2 have a link to Page 3 Page 3 is a html page, the frame source is Page 4 There is a javascript:history.go(-1) link on Page 4. I want to go back to page 1 (not inside the frame, i want it to go back to the previous page just like when you click the "back" button of your browser) or go back to page 2 (whichever one is the last page) but the link doesn't work because it's inside a frame... If i go directly to page 4 without using the page with the frame (page 3) the link will work and get me back to page 1 or page 2... some help would be appreciated !! Hello everyone,i will try to exaplain you what i am trying to do: I am building a web site in html5 and right now i am working in drag n drop some images from one iframe to another.Until now everything worked great.Today i connected my first iframe with my database so all the pictures are taken from there.For this reason, in my code, i create several <div>,each one with id>=1. My code for this is the following: Code: echo "<div class=\"drag\" id=\"".$info['id']."\" draggable=\"true\"><img src=\"postImages/".$info['id'].".jpg\" class=\"post\"></div>"; Its in php,but my results from chrome are the following: Code: <div class="drag" id="2" draggable="true"><img src="postImages/2.jpg" class="post"></div><<div class="drag" id="1" draggable="true"><img src="postImages/1.jpg" class="post"></div><div class="drag" id="3" draggable="true"><img src="postImages/3.jpg" class="post"></div><div class="drag" id="4" draggable="true"><img src="postImages/4.jpg" class="post"></div> So,so far i created several <div>s with one class "drag" and different ids starting from 1 until 4. And here start my problems!I have to change my code for the drag and drop functions in javascript in order to create a specific array with objects with id the <div> id.In more details,my code so far: Code: var people = {
Seth : {
blog : "http://google.com",
photo: "postImages/1.jpg"
}
Seth2 : {
blog : "http://google.com",
photo: "postImages/2.jpg"
}
};
What i want is the SECOND iframe to create an array named people,but insead of Seth and Seth2 the objects inside to have ids 1,2,3... from my <div>s from the previous iframe. I am trying so many hours for this one (it is obvious that my javascript skills are not that good..) that i dont know what to do..i would be glad if you could help me! Thanks in advance! I have a website, the main page of which we'll call Parent_page. Within Parent_page there's an iFrame, the name of which is the_iframe. The default source of the_iframe is a page which is default.html. I want to supply people with a URL that: Step 1) Opens Parent_page displaying a source in the_iframe that is NOT default.html (that different source will be called different.html) Step 2) Then -- and this is the troublesome part -- does a page jump to element #12345 within different.html. I've managed Step 1. Here's the Javascript I'm using in the head of Parent_page to allow for Step 1 to happen: <script type="text/javascript"> function loadframe(){ if(window.location.replace) window.frames.the_iframe.location.replace(get('framepage')); else window.frames.the_iframe.location.href=get('framepage'); } function get(key_str) { var query = window.location.search.substr(1); var pairs = query.split("?"); for(var i = 0; i < pairs.length; i++) { var pair = pairs[i].split("="); if(unescape(pair[0]) == key_str) return unescape(pair[1]); } return null; } if (location.search&&get('framepage')!=null) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", loadframe, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", loadframe ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); loadframe(); }; } else window.onload = loadframe; } </script> ...and here's the URL I use that opens different.html in the_iframe instead of default.html: mywebpage.com/parent_page.html?framepage=/different.html Again, that part works just fine. However, to accomplish Step 2, I thought I could just use: mywebpage.com/parent_page.html?framepage=/different.html#12345 But when I do that, suddenly nothing after the ? in the URL works. How can I make this page jump happen? Please, please dumb down your answers! I know HTML decently enough, but I don't know anything, whatsoever, about Javascript. The JS code above I copied from another website. Thanks! A few weeks ago, I posted a request for a basic script that I could use to load bible references into the browser depending on the current date (1 reading/week) as part of my Duke of Edinburgh award scheme project - I'm 15 and have started helping out with the local church website as part of my community service for the award. I know the basics of html, and a very little bit of Javascript/C++ When I posted the request, I was very quickly provided with a script that I am very grateful for, from Philip M (I think). We have just decided to attempt to implement the script into the website, and I am struggling a little bit with using Iframes in Javascript. Is there any possibility that somebody could give me a hand? (The test week is currently 49). The code works perfectly aside from the iframe loading. Code: <html>
<head>
<script type = "text/javascript">
function showWeekText() {
var texts = new Array(54); // array index starts at 0 which is unused
texts[1] = "Iframe for Week 1";
texts[2] = "Iframe for Week 2";
texts[3] = "Iframe for Week 3";
texts[4] = "Iframe for Week 4";
texts[5] = "Iframe for Week 5";
//6-48 removed for ease of viewing
texts[49] = <iframe src ="http://mobile.biblegateway.com/passage /index.php?search=matthew%203:1-6&version=NIV" width="90%" height="4 <p>Your browser does not support iframes.</p> </iframe>";
// Iframe i wish to use for week 49 (Iframe works in an empty html page, but unsure how to use in javascript script)
<iframe src ="http://mobile.biblegateway.com/passage/index.php?search=matthew%203:1-6&version=NIV" width="90%" height="4 <p>Your browser does not support iframes.</p> </iframe>";
texts[50] = "Iframe for Week 50";
//texts[51]-[53] removed for easier viewing
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1); // month 0 is January
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}
var today = new Date();
var weekno = today.getWeek();
var weektext = texts[weekno];
document.getElementById("myweek").innerHTML = weektext;
}
</script>
</head>
<body onload = "showWeekText()">
<div id = "myweek"></div>
</body>
</html>
Hi... is there a way to create iframes using cookies and javascript ? What i need to do is to have a way to create a cookie on page one, and use the info on page two to create the iframe. Users will see a list of "external links", once they click on a link, they will be redirected to a page that will generate a iframe of the chosen link. My guess is that if there is a way, it must need to use cookies to store the info (url) to get used by the script that will create the iframe on the page that will be used to show all iframes. Any ideas or help with this will be apriciated. Sorry for my poor english. |
|||||||