I want to display a users previously visited page in an iframe on my page. For example: if a user is on cnn.com, and then they type in mysite.com an click on a button on my page, I was the iframe on my page to display cnn.com.
I have read several solutions online but none have fixed my issue. My current implementation is as follows:
index.html:
<body>
<div>
<h1>Welcome to mysite!</h1>
<h3>Click the button to see a site you have previously visited</h3>
<button id="button">magic</button>
</div>
<br>
<p>This is a site you visited previously</p>
<iframe id="myIFrame" height="500px" width="100%" class="netframe" src="example.com"></iframe>
</body>
script.js:
$(document).ready(function(){
$("#button").click(function(e){
document.getElementById("button").style.color = "red";
$("#myIFrame").attr('src', parent.history.back());
});
});
The issue I am having is that when I click the button, the entire page goes back, and it is not shown in the iframe. So in my example when I click the button, my entire page goes from mysite.com to cnn.com. Id like the parent page to remain the same, and the iframe to load cnn.com within it.
I have read up on some of the quirks regarding how history is different depending on how you load up an iframe, but none of that has helped me.
If there a way to do what I want to do?
No, this isn't a thing that you can do. The contents of the user's browser history are generally treated as a secret; you cannot cause the browser to reveal them to you.
In situations where the user navigated to your page by clicking a link on the previous page, you can determine what that page was by checking document.referrer. However, this will not be the case if the user entered your page's URL manually, as you describe in your question.
In any case, methods like history.back() do not return a value; they cause the frame to navigate to the previous page in its history. There is no way to determine what this page is, and doing so will generally cause your script to stop running (as your page is no longer active).
Related
I'm trying to figure out how to refresh the contents of an iFrame on a page. I did quite a bit of Googling and hunting around through old posts, but all of the solutions offered are for reloading an iFrame to the initial src URL, and not the active URL.
For example, I have an iFrame that contains my Freshdesk client portal embedded into my main website. If I click around to a couple of different pages within the iFrame, I then want to be able to intercept a page refresh and simply refresh the iFrame to the active page.
Current Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to home
Desired Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to new ticket screen (the last page visited in the iFrame before triggering the refresh)
The refresh doesn't have to be triggered by an f5 refresh, I can use an inline button on the page, but it needs to reload the iFrame to the same page that it was last on, not the original src URL. I tried the following code, but it refreshes to the home page of my Freshdesk every time:
document.getElementById('iframeid').src = document.getElementById('iframeid').src
and
document.getElementById('some_frame_id').contentWindow.location.reload();
So, how can I refresh my iFrame without restarting back to the original src URL?
You can use the onbeforeunload event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload to detect that the page is going to be closed or refreshed.
So you can then compare the active src and the original src of the iframe to know if the user navigated to some page inside the iframe.
Then choose your favourite message passing system to make sure the portal has a way to know that src after it loaded again: url parameter, local storage, cookie, something else...
With the help of Shilly and a bit of brainstorming, I figured out a solution to my problem, and am posting it here for anyone else in my situation. Turns out that Freshdesk (the website inside the iframe) allows you to use custom javascript. Using this functionality, I came up with the following:
1) use parent.postMessage on first page load to send the URL of the currently active page to my main website.
2) use sessionStorage to store the URL of the current Freshdesk page on my website
3) on first page load of my main website, check to see if a sessionStorage value is set, and if so, set the iFrame's src to this value.
It's not quite a true "only on refresh" solution, however it does make the last iFrame page visited persist throughout the remainder of the user's session, which means they won't lose their place if refreshing or navigating away temporarily. Thanks to the use of sessionStorage, this will also reset back when the user closes the page, meaning on their next visit they'll restart at the Freshdesk home page (or whatever other website you're hosting inside the iFrame).
I am simply creating an HTML page, where I am using target="" in the link which opens up the page as target="_blank".
For Instance,
link
What I want is, when the user clicks on it, the blank page, which opens up, should open, but the main page from where the link is clicked should stay. Right now, it is acting like "target="_blank", which onclick shows the page redirected.
Is this possible ?
Not an exact answer to this problem but you can do a nasty trick to make it look so by opening the current page in new tab and loading the link in current tab. One disadvantage with this would be that current page will be in a tab next to new page.
You can do something like
<a href="https://google.com" onclick="window.open('#','_blank');window.open(this.href,'_self');">
I don't think you can control the browser behavior by manipulating which tab to focus, it is like letting me make changes to your bank profile information illegally. There is really nothing much you can do about it.
Regarding below:
<html>
<head>
</head>
<body onload="document.naughtyWidgets.reset();">
<form name="naughtyWidgets">
… widgets…
</form>
</body>
</html>
The form resets just fine when the page is refreshed. However, if the form is say under page 'X', and one clicks a couple of radio buttons on the form, navigates to page 'Y', and returns to page 'X', the radio buttons are still clicked. Is there any way to reset these buttons to default when revisiting the form?
Thanks
This typically happens when the user clicks the browser's "back" button. In that case, there really isn't a full page load; it's coming from the cache.
Use the onbeforeunload event to trigger a form reset just before leaving the page.
window.onbeforeunload
From here: Best way to detect when a user leaves a web page?
EDIT:
Quote OP's Comment:
"maybe it helps knowing that the website is made using Wix, and the html part is simply an additional box on a page, in which i can add code."
That's a huge detail you should not have left out of your OP. If you're just sticking content into a content box within a CMS, then this issue is likely impossible to fix without control over the entire page.
On one of my website's pages, call it http://website1.com/path, I have an iframe whose source is one of my other websites.
example: <iframe src="http://website2.com"></iframe>
I have a button on website2.com that drives them to the home page of website1.com.
However, when they click that button, website1.com just loads in the iframe. How do I get it to refresh the page and drive them to website1.com as it's own page?
I tried window.top.location.reload() and it didn't work..
Assuming it's a link:
Click me!
You can also do target="_parent", which is useful if you have nested frames and only want to go up one level.
(On that subject, if you want to specifically go up TWO levels... you can't. At least not in HTML. JavaScript: parent.parent.location.href = "xyz";)
I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry