I have a front page with an iframe that loads different content. I want a url that will take users to the front page with pageA loaded in the iframe or another url with pageb loaded. How do I do this?
Is there a simple html solution I'm missing or is this a jquery thing?
You can use a query parameter to specify the page you want the iframe to load.
www.example.com/my/link/page.html?iframePage=website_a
Then you can use Javascript to check the parameter, and specify which page the iframe loads.
Here's an example jsbin.
https://output.jsbin.com/hawinadevi/1?iframePage=website_a Loads Bing
Change the value of website_a to make the iframe load Bandcamp instead.
Related
I want to display my website in iframe of other domain(s). When displayed in iframe of that domain, I want to perform some actions like hiding/displaying content. Pages from my website are also iframed in same domain as well. So there is dynamic behavior. How do I find out where is my page iframed? There will be navigations from one page to another in iframe and whenever full page load happens, I want to know the context/parent where my page is iframed.
Using postMessage is not an option because it is async and I don't have control over other domains/apps. I found out iframe name can be accessed from following question -
access iframe name from inside iframe
Can I use it to find out the iframe context. (I can ask other domains/apps to set particular name to iframe so that they get correct rendering of the page)
I have the following situation: A static web page, say whatever.html, which contains one iframe, both on the same website. The iframe contains a dynamic page (CGI/Perl), say cgi.pl?param=a; based on user action the content of the iframe will be replace by new pages (same CGI script with different parameters), say cgi.pl?param=b.
If the user opens only the iframe page I am able to redirect to the original parent page (the static HTML page):
if(self==top)
top.location.href = "http://www..../whatever.html";
This works, but I would like that the iframe contained in that page is set to the dynamic page which reestablishes the parent. In my solution the iframe will contain only the default dynamic page (cgi.pl?param=a), but it should show cgi.pl?param=b in the iframe.
I hope I explained clearly.
Thanks for your help!
pi
The answer is straightforward. Use the script above to call the container web page with a parameter (e.g. test.html?abcd) and then use a script calling
window.location.search.substring(1)
to send the parameter to the iframe src.
Is it possible to load the entire page using PJAX and change the browser's page url?
My purpose is to prepare first the response to make sure that it would be loaded without refreshing the page in a long time after clicking in the menu-page-link or execute a javascript function.
I tried using PJAX but the one that provides a response data for the selected element to load where the request has to display.
Like:
$('a').pjax("#container", { fragment: "#container" });
I want and I tried:
$('a').pjax({url:"new-page.html"});
But it didn't work.
I'll appreciate your help and suggestions. Thank you!
Yes it is very much possible using jquery PJAX plugin , you can keep the header footer static and change the body content using PJAX , and yes it will change the url too along with browser history stack i.e. almost making it like a normal navigation, except that page wouldn't be refreshed.
But the container needs to be same in both the urls. You can try :
$(document).pjax('a', '#pjax-container')
You can load page via ajax but you cannot change page url, when you change it, it will automatic redirect to that address. This prevent phishing page, fake url.... But why you need to load page via ajax then change the url, why don't just change the url?
I have a simple HTML/PHP web page and one IFrame in it. The IFrame contains links to external web sites.
I need some JavaScript that will extract the exact URL of the web page that is currently displayed inside the IFrame (not just the base URL of the external site). How can this be done?
The way to access the url on the iframe is by checking the src attribute.
console.log(iframe.src);
// will print http://example.com
However, when the user navigate to a different page in the iframe, the parent window will still show the original url on the src property
You can use .contents() to get the contents of an iFrame. That page has an example too.
The following line will give you the current URL of the iFrame. Not the initial, but whatever it is showing when you call this:
document.getElementById("iframe").contentWindow.location.href
Note: This will only work if the page is on the same domain.
I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.
Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML becomes the content fetched by ajax witch overwrites the loading image . easy to setup but i recomend you stop using iframes
Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.
write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage)
I think the onload event of the iframe is not supported in all browsers