I have a webpage (localhost). When I type its URL in the browser I am making it redirect to another webpage using Javascript.
<head>
<script type="text/javascript">
function wa() {
window.location = "http://www.anyWebsite.com";
}
</script>
</head>
<body onload="wa()">
As a result the URL in the web browser also changes. The only thing I need here is that the URL should not change.
You can load the other page into an <iframe> or <frameset> that covers your entire page.
Note that you will not be able to display the other page's title.
Also note that many websites (such as StackOverflow) will prevent this for security reasons.
Simple answer!! Not possible
Page will refresh every time when you will change window.location
Not possible for security reasons, users should see what URL they are at.
There are workarounds though - make an IFrame for the whole page and set the location there or dynamically load the page and update from different location.
I cannot believe I'm about to suggest using iframes, but you're easiest solution is indeed iframes.
Create an iframe that's 100%x100%, and when the window loads set the location of the iframe to your new url. The location bar will (should?) stay the same while the page appears to have moved onto a different location.
iframes: http://www.w3schools.com/tags/tag_iframe.asp
Related
I am working on a project which i will like to collect the content of an hidden iframe and make it the html of a div each time the iframe changes state while loading so it will act like the page is redirected and downloading its contents, but the heading and footing of the page will not refresh as well.
A good example is how facebook keep their heading and footing fixed while redirected.
i have achieved collecting the iframe content to the div using onload, but the problem is that, the content will not fully download from the iframe before collected i.e images, .css files and .js files.
Here is a code i tried:
THE SCRIPT USED TO COLLECT THE CONTENT WHEN LOADED
<script type="text/javascript">
function frame_loaded(){
var content=$('#iframe_id').contents().find('#body');
$('#my_div').html(content);
}
</script>
AND THE FRAME
<iframe id="iframe_id" src="some_url.php" style="display: hidden;" onload="frame_loaded()"></iframe>
AND THE DIV
So i used setTimeout() to slow time for 1 second so the frame will load the content and execute it's scripts fully before collecting it.
Here is the code:
setTimeout(function(){
$('#my_div').html(content);
},1000);
At times the content still won't complete downloading it's content from the iframe before collected.
I don't have any idea how to listen to the iframe if it's fully loaded or listen to it's ready state.
If any one can tell me the best way to do this, it will be very appreciative because i am very new to this.
I would suggest using portholejs which will help you interact with the iframe(domain xyz.com) and you can pass messages in between the iframe(domain xyz.com ) and the page which holds it (domain abc.com).For example in your case when the iframe loads you can pass a boolean (from xyx.com )to your page(abc.com) which holds the iframe and then download the content there is working example of how it porthole works here.
Hope it helps.
kind of "stupid" but try this (i don't have your code so it's a bit "hard" for me
$(document).on('load','#iframe_id',function(){
var content = $(this).content().find('#body');
$('my_div').html(content);
})
I have a page that people load in an iframe (its like a widget they can put on their pages) and I want to see which pages are loading it... is this possible?
No, that's not reliably possible due to the Same origin policy.
(You would have to read the value of parent.location.href, which is not possible.)
I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)
This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.
I want to track what happens inside an iframe when a user clicks on links in the IFrame. The page that contains the iframe (the parent) is to track the user´s navigation through the page in the iframe. Both pages will be hosted on the same toplevel domain, although the subdomains will differ.
I need the parent page to be notified of every click, but I do not have direct control over the pages I load into the iframe.
Is adding an onclick to all the links whenever the page in the iframe is loaded possible? How would I go about doing this?
This would be the "template" on which to build:
<html>
<script language="javascript">
var currentURL;
</script>
<body>
<iframe id="container" width="500" height="500" src="http://subdomain.parentdomain.com"/>
</body>
Iframe CrossDomain access needs to be the same domain, subdomain, and port.
If you had them on the same domain, you could bind click event handlers on all the links, then when they are clicked log a click to something like google analytics, your database, etc.
I do not have direct control over the pages I load into the iframe
That's your blocker. If you can augment the code within the remote pages, you can use postMessage and the iframe fragment identifier hack to get browser coverage.
Fortunately, someone already did the dirty work for you:
http://easyxdm.net/
http://consumer.easyxdm.net/c/
http://www.codeproject.com/KB/scripting/easyXDM.aspx?msg=3153511
I am going to use an AJAX-Proxy to have the content (as far as the browser is concerned) come from my domain. This will solve all the cross domain scripting issues that CodeJoust mentioned. Speed of delivery might be a problem due to the overhead I will be generating, but that will have to be seen.
I will probably move along the lines of this Stackoverflow Question:
"Apply “onclick” to all elements in an iFrame"
Regarding legal issues pertaining to proxying and changing the content of pages dynamically, it will have to be checked. I believe that tracking users that give their express consent is, from an ethical standpoint, unproblematic.
With jQuery it would be easy.
$(document).ready(function(){
var iframeWindow = $('#container')[0].contentWindow;
$(iframeWindow).load(function(){
$(this).find('a').click(top.myClickHandler);
});
}
function myClickHandler(){
/* Do something */
}
I have a web page that I am hosting for a client. The page has the client's header and footer on it and our content (a flash app) placed in the middle.
The client now wants to provide us with an html page that contains their header, footer and some ads all in one document. They want us to include this document as an iframe and then dynamically place OUR content inside of that frame.
This seems very hacky to me but I thought I'd give it a shot. So what's the best way to take my markup and place it into the iframe?
Thanks!
Chris
Can't be done client side because of XSS security issues ... unless they are both on the same domain, but from your description, i doubt it.
Server side, you could dynamically read the target page, modify it any way you wish and then present it. If you really do need it in an iframe, you can dynamically load the modified source you got by something like this:
<html>
<head></head>
<body>
<iframe id="blah"></iframe>
<script>
var doc=document.getElementById("blah").contentDocument;
doc.open();
doc.write("content");
doc.close();
</script>
</body>
</html>
Just remember to also change any links, images, and so on with full URLs.
Can you supply them with some API they can use - so they can place something in their page to call your bits. As you are working with flash, you could avoid cross site scripting issues by including a policy file to give permission to their domain.