Change the page URL through iFrame? - javascript

I've got a problem where I've got loads of child pages, and 1 main page that houses these subpages. The problem with that, being that the experience the application is trying to deliver needs to be nice and unified.
I have a menu that targets the iFrame to open URLs there, and I've got a bit of JS parent.document.title = document.title;
that changes the parent's title, but one more thing I want to try and do, is to change the URL, similar to how Facebook does. If I'm on a friend's profile, the top and bottom bars don't move, but in Facebook's case it's an Ajax load - and the profile shows, and the URL changes to their profile ID without actually shifting from 1 page to another.
I've read in a couple of places that the parent.document.url value is read only to child frames, but I'm not very sure and this is something I've wanted to do for a while now!
Summarizing:
Is there any way to change the parent's URL through a child iFrame? Similar to the code pasted above?
Thank You!
Much appreciation for any answers :)

If I am not wrong, you are trying to simulate a back button effect. You can do this using window.location.hash Read: Location Hash for better idea.

Related

Reload only part of an iframe

I looked on many posts but I've never found out such a context like the one I have so I'm requesting you some help.
Here is my development context :
I had in mind to build a single-page based PHP Application and I then chose to set-up a global container page embedding a side navbar-menu on the left for navigation control and an iframe on the right for related content.
The iframe is updated following the navigation navbar to display the selected content to the user.
First, I'm not saying that this is the right way to do this kind of PHP Application and would be ears opened to different way to achieve this.
For now, it's working out but I rose up a problem since I would like to reload only A PART of my content iframe. Indeed, there is a div box inside it that should be updated when the rest shouldn't (or at least it looks strange during navigation).
I was wondering if setting-up a listener on the iframe to look on mysql database updates and then trigger a JS function would be memory cost efficient ?
What would you guys think ? Maybe there's a different way to solve this problem (I was thinking of a big AJAX rendering instead of an iframe for example) ?
Thanks a lot for your answers,
Martin
Okay so for those who would face the same situation I ended up trigerring an ajax function in my child iframe from the parent main page via the instruction document.getElementbyId("myIframe").contentWindow.myAjaxFunction() that run the search script in background (with post parameters from the parent page).
Then I got the reload of only a section of the iframe.

show contents of link

I've been searching the internet to get some information about how i can be able to detect and show what a url is about.
Facebook has a good example of what i actually want to achieve:
If you create a update on facebook and paste in a URL, facebook will detect some information about it and show a box with some text and often the right picture.
for instance, take: http://www.ebay.com/itm/Mens-Monk-Strap-Loafers-Suede-Lined-Metal-Buckle-Slip-Casual-Dress-Shoes-New-/311170422772 . then it shows the image of the shoe and headline.
Ive found other services which does this with image services and youtube, but what i need is about getting information of products most of the time, so often urls from shops. So the user pastes in a url, and i can detect what that link is about.
any ideer how this can be done ?
Is it backend code, like c# or javascript ?
Hopefully some of you can point me in the right direction. Thanks in advance!
Facebook scrapes pages for specific metadata in the back-end and uses it to generate the snippets you see, which can either be served along with the initial page load or brought in via JavaScript (front-end). From there it's a matter of using CSS and JS to style the popup to your liking.
Depending on how inter-related your site is with the content you want to display, this can be an easy task or a difficult one.

Onclick to iframe? Filling anchor on same mouse click? Loading separate URL in to sidebar without any extra input?

I am attempting to have a link load an article from my domain in to an iframe. I understand that it is usually easy to link using:
Google
But when it comes to Iframes I am having difficulty formatting the code correctly so that it will display inside the iframe.
This leads in to my next question. If this is easily remedied then is it possible to also execute code that will fill in the URL of an anchor in the same mouse click.
Finally, in that same mouseclick would you be able to execute code similar to:
$('#abc').click(function() {
$('#xyz').load('content.html');
});
In order to populate a sidebar with information from a second link?
Thank you for taking the time to read over this. I am sorry if it is truly elementary, but this is my first bona fide webpage, and my limited knowledge is really delaying the execution of my ideas.
Special thanks to wdm for allowing me to progress to this stage of questioning by answering my earlier concerns.
To target your iframe, change to:
Google
for the 2nd part, the above thing can be reused instead of using jQuery.

Linking to a page and expanding a topic with Javascript

I want to link to a page which contains multiple support topics.
When the user clicks on the link while being on an external site, the topic should be expanded as soon as the user arrives on the support page.
Example:
I link to this page
http://www.nintendo.de/NOE/de_DE/support/nintendo_ds_lite_159_142.html
Topic I want to be opened on arrival
javascript:fadeNAppearDiv('box_3_9277');
(First topic in the FAQs)
It's not clear if you are maintaining the target site (where the div will open) or not. If you don't have access to the code for that page, then there isn't any way to invoke the javascript function on it. If you can modify that page, you can do as #PhiLho suggests and modify the URL you are using to specify the DIV to open and have an onLoad handler that parses the URL and opens the appropriate DIV.
Good idea, but I don't see the question... :-)
The way I saw on some sites, like deviantART, is to use the sharp anchor notation: myURL.com/foo/page.html#TopicToExpand
JS can analyze the current URL and get the anchor part, then do whatever you need to do to highlight/jump to the right place.

Use jQuery to append star to menu item if the linked page's content has changed since last visit

I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.

Categories

Resources