Changing URL from an iFrame: setTimeout changes how window.location works? - javascript

My iframe contains a link that should change the hash/trigger an event in the parent.
How come this code won't work:
<!-- in iframe -->
Link
// in parent
function navigate() {
window.location.href = '#anchor';
}
But this does:
<!-- in iframe -->
Link
// in parent
function navigate() {
setTimeout(function() {
window.location.href = '#anchor';
}, 0);
}

I think you have an issue with the context that the navigate() function is in, with window being in the context of the iframe.
Try setting you navigate method to use top.location.href instead, for example:
// in parent
function navigate() {
top.location.href = '#anchor';
}
or alternatively, in your iframe, call parent.window.location.href = '#anchor'

#am not i am's comment that you have an apostrophe is likely the cause
Even the code highlighter is showing different highlights because of it.

Related

avascript:history.go(-window.history.length) does not work

I am doing mobile html page via phonegap
I want to redirect user to first page. So I cannot give direct link such as a href to index.html
When User click logo I want to calculate page length that he visited and use history.go.
function goBack() {
var backLength=window.history.length;
javascript:history.go(-backLength);
}
but this does not work, no error but don't redirect
Remove javascript: and wrap in script tag:
<script>
function goBack() {
var backLength=window.history.length;
history.go(-backLength);
}
</script>
Clean up code. To avoid submit, use (javascript: void 0) in href. Use proper callback
function goBack() {
console.log("Test")
var backLength= window.history.length;
history.go(-backLength);
}
I fixed it by using:
window.history.length-1

If user came from previous page on site then this, else do this

What would be a viable way to accomplish the following:
A website has two pages; Parent page and Inside page. If user came to the Inside page directly by typing in the address or by following a link from a page other than Parent page, then show "foo". If user came to the Inside page from the parent page, then show "bar".
I would need this done in JS if possible. If not, PHP is a secondary choice.
You can get the page the user came from with document.referrer.
So you could implement your solution like this:
if (document.referrer === 'yoursite.com/parentpage') {
// do bar
} else {
// do foo
}
Please try this
This code in second page
jQuery(window).load(function() {
if (sessionStorage.getItem('dontLoad') == null) {
//show bar
}
else{
//show foo
}
});
This code in parent page
jQuery(window).load(function() {
sessionStorage.setItem('dontLoad','true')
});
with php:
There is a simple way is to create a mediator page which redirect to inner page after make a session / cookie.. then if you'll get session / cookie, you show foo & unset session.
if someone directly come from url, no session / cookie found & it show bar..
You can use the document.referrer but this is not always set. You could add a parameter to the URL on the parent page and then check for its existance in the child page
Link on the parent page:
<a href='myChildPage.html?fromParent=1'>My Child Page</a>
JS code on your child page:
var fromParent=false;
var Qs = location.search.substring(1);
var pairs = Qs.split("&");
for(var i = 0; i < pairs.length; i++){
var pos = pairs[i].indexOf('=');
if(pos!==-1){
var paramName = pairs[i].substring(0,pos);
if(paramName==='fromParent'){
fromParent=true;
break;
}
}
}
if(fromParent){
alert("From Parent");
}else{
alert("NOT From Parent");
}
This method isnt 100% foolproof either as users could type in the same URL as your parent page link. For better accuracy check the document.referrer first and if not set use the method i've outlined above
intelligent rendering with jQuery
After using #Rino Raj answer, i noticed it needed improvement.
In javascript, the load() or onload() event is most times much slower,
since it waits for all content and images to load before executing your attached functions.
While an event attached to jQuery’s ready() event is executed as soon as the DOM is fully loaded, or all markup content, JavaScript and CSS, but not images.
Let me explain this basing, on code.
When i used #Rino Raj's code, with load() event, it works but on the second/called page, the content appears before class="hide fade" is added (which I don't really want).
Then i refactored the code, using the ready() event, and yes,
the content that i intended to hide/fade doesn't appear at all.
Follow the code, below, to grasp the concept.
<!-- Parent/caller page -->
<script type="text/javascript">
$(document).ready(function() {
sessionStorage.setItem('dontLoad', 'true');
});
</script>
<!-- Second/called page -->
<script type="text/javascript">
$(document).ready(function() {
if(sessionStorage.getItem('dontLoad') == null) {
$("#more--content").removeClass("hide fade");
} else {
$("#more--content").addClass("hide fade");
}
});
</script>

Permission denied when implementing JavaScript within an iframe from the parent page

I am trying to implement JavaScript within an iframe from the parent page. I read Invoking JavaScript code in an iframe from the parent page, however, get the following error.
Error: Permission denied to access property "showIt"
document.getElementById('targetFrame').contentWindow.showIt();
I've tried implementing this both on jsfiddle as well as my server (don't know if it matters, but it uses https), but get the same results. I've also tried removing the $(function(){}) wrapper on the child iframe, but no change.
My actual application is described below.
How can this be accomplished?
My Application:
I have my parent page https://jsfiddle.net/5f4ct5ph/6/) which contains an iframe.
<iframe width="100%" height="300" src="https://jsfiddle.net/5f4ct5ph/5/embedded/result/" id="targetFrame"></iframe>
<button id="show">Show</button>
<button id="hide">Hide</button>
$(function () {
$('#show').click(function () {
document.getElementById('targetFrame').contentWindow.showIt();
});
$('#hide').click(function () {
document.getElementById('targetFrame').contentWindow.hideIt();
});
});
The iframe page (https://jsfiddle.net/5f4ct5ph/5/) contains a tinymce editor.
<div id="content">Initial content goes here</div>
#content {height:200px;width:400px;border: 1px solid;}
$(function () {
tinymce.init({
selector: "#content",
width : 400,
height: 200,
setup : function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
function showIt() {
tinymce.get('content').show();
};
function hideIt() {
tinymce.get('content').hide();
};
});
fiddle.jshell.net (the parent document domain) is different to jsfiddle.net (your iframe domain).
I've changed your code to point to the jshell.net url instead (You can get this by using the URL of the frame in the bottom right of jsfiddle rather than the address bar).
https://jsfiddle.net/GarryPas/5f4ct5ph/7/
showIt() and hideIt() don't seem to be defined (because they are inside an anonymous function). Change this:
$(function () {
...
function showIt() {
tinymce.get('content').show();
};
function hideIt() {
tinymce.get('content').hide();
};
});
To this:
$(function () {
...
});
function showIt() {
tinymce.get('content').show();
}
function hideIt() {
tinymce.get('content').hide();
}
Then remove my alerts and put back your original code which I commented out.
Normally, if iframe and parent are on same domain, it should work, but there are restriction to communication from window to window. You can try using postMessage, like this:
In your parent page, in the click event, instead of calling the function directly, you could do this:
child_window = document.getElementById('targetFrame').contentWindow;
child_window.postMessage("showit" or "hideit", your_domain);
The in you iframe:
window.addEventListener("message", check_message, false);
function check_message(event){
switch(event.data){
case "showit":
showIt();
break;
case "hideit":
hideIt();
break;
default:
breaks;
}
Make sure your functions showIt and hideIt are available from where you call check_message.
Again, there may be another problem, it's hard to tell with the embedded jsfiddle, but in any case, when dealing with iframes and javascript, postMessage is often more flexible and secure than accessing functions and variables directly.

window.location.href not working on my form

I create a web app that looks like this:
When i click the run model, i want that the form :"Dashbord", will open.
The JS code:
<script>
window.onload = function () {
function newDoc() {
window.location.href("#http://127.0.0.1:8100/#dashboard");
}
}
</script>
When The "Run Model" button onClick activate the function: newDoc().
The problem is: that in my URL path it is written: http://127.0.0.1:8100/#dashboard
but the 'Dashboard' form is not logged. it stays in the same page.
What should i do?
window.location.href is not a method, it's a property.
Try assigning it instead (also note, I removed the leading # character)...
window.location.href = "http://127.0.0.1:8100/#dashboard";
You also need to move your function outside of the window.onload event...
window.onload = function () {
}
function newDoc() {
window.location.href = "http://127.0.0.1:8100/#dashboard";
}
The onload event handler is generally only needed when you're dealing with specific elements on the page that won't be available until the page has finished loading.
By putting the newDoc within the onload event, you were effectively hiding it from being used directly by other events.

Call javascript function on passing through link

I have a CMS which loads articles using ajax. The article is loaded through a function with some parameters. What I need is: when someone clicks a certain link, it will redirect him to the target page AND launch the function on target page. Is it possible? To be concrete, I have function loadArticle(articleID). When I access the page, there is article list. When I launch function loadArticle, it hides div with article list and shows particular article. So I need some way to call it through link, like: <a onArticlePageLoad="loadArticle(15)" href="./articles">Title</a>
Example: on page.html I have a link which points to page2.html. On click, I need to load page2.html and execute function foo in page2.html
As mentioned by ChristianF you ll need to have an identifier on your link. I have this function:
function hashtagExecute(hashtagstring,action){
if (location.hash==hashtagstring) {
action();
}
}
/*Gets: STRING -- Beggining with '#'
* FUNCTION -- The function to be executed if the above string is present in the url
Then on the link page2 with foo execution
and onload:
window.onload =function (){
hashtagExecute("#foo",foo());
hashtagExecute("#bar",bar());
... //as many different cases you want just remember to actually have those functions :)
}
You could just have a function that executes on page2.html at the bottom of the body or onload.
As people were already saying, you will need some sort of onload event on page2. But it sounds like you want that function being called to change depending on what link was clicked on page1.
Would something like this work:
page1:
page2 case A
page2 case B
page2:
<script type="text/javascript">
window.onload = function foo(){
var case = window.location.search;
if (case == "A") {
functionA();
} else {
functionB();
}
}
</script>

Categories

Resources