JavaScript: Read URL of parent page - javascript

I have a page that is loaded inside. The application including this page is located on another domain. So the domain of my page and the application rendering it inside an iframe are located on different domains. The page inside iframe reads the URL it is loaded from to store in the database. The page loading has a hash in the URL.It is like:
https://www.somedomain.com/organizers/list/#type=current&sort=bydate
I am reading the URL from mypage. It is located on:
https://www.someotherdomain.com/organizers/#sample
var _url = document.referrer
The above code gives me the URL but only till "https://www.somedomain.com/organizers/list/", "#type=current&sort=bydate" is missing. I need that else this code is of no use to me. Is there a way I can read the complete URL without missing any segment?

like this
var _url = window.location;

This is by design. The browser will give you the referrer which is the URL where the user came from, however the #hashmark is technically (by its original design) a sub-navigation concept within a page, thus not passed on to the next page load.
If you were on the same domain as the parent page, you could access it via the
window.parent.location.hash
however since you are from a different domain this access will likely be blocked for security reasons.

Related

trying to access data which is inside a specific iframe

im trying to access data which is inside an iframe. There are multiple iframes on the web pages without ID tag, source of the iframe is given in html format , no external link given.
so can i switch to a particular iframe and access data inside it ??
i tried using
var ifrm = document.getElementsByTagName('iframe')[1];
var $iFrameContents = $('ifrm').contents();
$entryContent = $iFrameContents.find('div.entry-content');
but this code is NOT working. i have attached a screenshot of my coding , can anyone help me in writing a javascript/jquery to get the data in Tag inside an iframe with index 1 .
screenshot of coding
iframe.contentWindow is its internal window, and iframe.contentWindow.document is its internal document object.
But bear in mind that iframes are subject to cross-origin rules, and you won't even be able to read the URL of the iframe if it's on a different origin. You can start with a link to same-origin, but the user could navigate it elsewhere.
window.postMessage can be used to communicate between windows on different origins, if you have control of both.

Blank page error due to location pathname

As titled,
I've a webpage which has multiple pages on it. The page was originally a single page app created using jQuery before I moved some of the contents into separate files, and load it dynamically using a jQuery templating plugin. The page starts at default pathname ('/') and whenever the content change, the pathname on the URL will change too.
function goTo(page){
// Changing URL without reloading the page (to allow changing the URL
//state without changing the page)
if (page !== 'main'){
console.log("Yes it is not main!");
window.history.pushState("", "", "/"+page);
} else {
console.log("Yes it is main!");
window.history.pushState("", "", "/");
}
// Set page template
$('#main').loadTemplate('pages/'+page+'.html');
}
The above is the method i used to change the URL and content whenever user clicks on the link.
The problem that I encounter is that, whenever I refresh the page when there is a pathname on the URL, the page will return 404 error (not found) and it will return an unknown blank html page that is totally empty (no css and script loaded).
For example, the main page URL is http://localhost:8000, and if I clicked to page A, the URL becomes http://localhost:8000/pageA. However in pageA, when I refresh the page, it will return blank. Only if I reset the URL to http://localhost:8000 then the page will refresh normally.
Is there a way to fix this blank page and pathname problem? Like changed the pathname before the DOM loads?
Thanks
Using window.history.pushState you will replace the browser location, and by hit page refresh you are sending request to the server, and you are asking to serve the page which name is in the location bar. However the page does not exist on the server so the server answers with Not found and that's correct behavior.
You have two options:
Implement the page also on the server side
Use client routing using hash (there are a lot of libraries for that, for example http://projects.jga.me/routie/)

Is possible to read script tag src URL content using JavaScript/jQuery

Please guide me. Is possible to read script tag src URL content using JavaScript/jQuery. Please don't suggest JSON/Ajax/iframe options.
I have tried like
<script src="http://www.test.com" id="test">
document.getElementById('test').src
but it give only src URL.
My Exact requirements is,
I have two application, each in different web server with www.siteA.com and www.siteB.com.
In Server2, I have cross origin and iframe restriction to access the application. Example: If a request is coming from server1(siteA) to server2(siteB) via Ajax or iframe, it's restricted to access the siteB page content. But If I load siteB in script tag it's loaded, but I'm not able to get the content.
So I mentioned above, don't suggest iframe and Ajax. Help me to achieve this.
The best way really is AJAX, but it does sound like CORS is an issue for you. The only other option I can think of would be to open the page in a new browser window, although I don't know what kind of user experience implications that will have on your application.
You can open a new browser window by:
function showContent(){
var url = document.getElementById("test").src;
window.open(url, "_blank");
}
Although if you take this route, you shouldn't put the url on a script tag, because the browser will download it once (via the script tag), and then a second time on the window.open.

Inserting javascript/css into an iframe across different domains

I have a local webpage (on my file system). I wish to load an iframe on the page that displays domain.com. I wish to change the iframe contents.
I can get access to domain.com and can get them to host a javascript file for me. So this should mean I do not run into the issue of same origin. It take ages for my file to get uploaded as it is done by a different team etc. My idea was on the server domain.com in my js file I could call another js file on myserver.com. Is it is being included in the domain.com js file it should work... well it doesn't.
Is this possible?
domain.com js file is as follows:
$(document).ready(function(){
$.getScript("http://www.myserver.com/my.js");
});
my.js on my server is doing
alert($("iframeID").contents().find('body').html());
It is returning null
If in my.js I do
alert('test');
Test is alerted to me.
The Same Origin Policy applies to the page sources, not the JavaScript. If your page is from one place (a file:// URL) and the other page is from another domain, then it doesn't matter where your script is hosted.
I'm not sure I got your scenario 100%. Correct me if I'm wrong:
You have a page with an iframe, and the iframe points to a page at domain.com
The page at domain.com attempts to retrieve your script from myserver.com, using $.getScript()
The script, when loaded, needs to modify the DOM on the page in domain.com (the one in the iframe)
The element iframeID in your code sample alert($("iframeID")... refers to the iframe on your page, where the page from domain.com is displayed
If this is correct, the issue is that the javascript executing inside the iframe on domain.com knows nothing about the iframe. It doesn't even know it is in the iframe. You can manipulate the page like any other HTML document, because the script is executing within the page in domain.com -- it doesn't matter where the script originally came from.
So you can print the body of the page in domain.com very simply:
alert($(body).html())

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories