I'm having some serious issues with my History.js/Ajaxify script. The main problem is that after a page has been loaded with history.js (by clicking a link), the other javascript in the <header> tag aren't loaded, in fact it's as if they've been unloaded.
To fix this problem I decided to load the scripts with statechangecomplete which I realised after some time, only caused more problems. Because not only does it load the scripts every time I click a link, but after a few page changes Chrome reaches 100% CPU usage.
$(window).on('statechangecomplete', function() {
$.getScript(document.location.origin + "/js/myscript1.js");
$.getScript(document.location.origin + "/js/myscript2.js");
$.getScript(document.location.origin + "/js/myscript3.js");
});
Meanwhile my <head> consists of this:
<head>
<title>Example</title>
<meta charset="utf-8" />
<meta NAME="ROBOTS" CONTENT="NOODP">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//balupton.github.io/jquery-scrollto/lib/jquery-scrollto.js"></script>
<script src="//browserstate.github.io/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script src="/js/ajaxify-html5.js"></script>
<script src="/js/uikit.min.js"></script>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="/js/myscript1.js"></script>
<script src="/js/myscript2.js"></script>
<script src="/js/myscript3.js"></script>
</head>
The weirdest part about this is that both uikit.min.js and mithril.js works after a page change. After looking through their code and comparing it to mine, I'm starting to suspect the reason to why my code isn't working as it should is because they all contain $(document).ready(function({}); while the mithril and uikit do not.
In the end I'm wondering why it causes my scripts to not load after a page change/history pushstate?
I found the issue, for anyone having the same issue as me, what I did was to delete
var result = String(html)
.replace(/<\!DOCTYPE[^>]*>/i, '')
.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
;
return $.trim(result);
From ajaxify-html5.js. This will make it so it doesn't remove the script tags etc.
Related
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
I am trying to use jQuery for the first time and I am coding it by hand. But my jQuery code doesn't work at all... Here's my setup :
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
<body>
<div class="test"> </div>
</body>
</html>
mainCSS.css
.test {
background-color:#FF0004;
border-radius:25px;
display:block;
height:500px;
width:500px;
}
mainJQuery.js
// JavaScript Document
$(document).ready(function() {
$('.test').click(function() {
$('.test').fadeOut('slow');
});
});
Just to state it for the record:
In order for your jQuery code to work, you need to link to the jQuery library in your HTML.
If you are following a tutorial that doesn't include this in the first step, you should find another tutorial to follow. If you got to this question because you did not follow the first step of your tutorial, you should read more carefully before falling back on StackOverflow, or risk getting some serious downvotes.
The two most common ways of including jQuery in your HTML page are:
1) Downloading the library, and linking to a local copy. In your <head> section:
<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>
2) Linking to a remote copy of the jQuery on Google's CDN. Again, in <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
If you don't link to jQuery using one of those options, or something similar, your code will not work. In most browsers you will be able to tell that this is the problem by opening the Javascript console, typing "jQuery" and getting an error like jQuery is not defined.
It's amazing that I couldn't find a duplicate question to close this in favor of, but then again I didn't click on every single "Why doesn't this simple jQuery script work" question on StackOverflow.
And there are a lot.
So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...
Edit: Additional information...
The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Template</title>
<style>
/* styles here */
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
<p>Canvas not supported.</p>
</canvas>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");
function renderContent()
{
// we'll do our drawing here...
}
renderContent();
});
</script>
</body>
</html>
It's states that JQuery referred URL is not correct
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I tried everything listed above and nothing seems to work until I put this string
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
in the head section of the HTML file. So here's how it looks:
<!DOCTYPE html>
<html>
<head>
<!-- jQuery Reference -->
<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>some title</title>
</head>
<body>
...
And the js file is located at a level below in the folder 'scripts'.
Finally, the error is gone and what a relief!
In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.
My fix was to change this...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
...to this...
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.
Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery ||
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>
This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.
Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked.
Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example
I was getting this same error code:
(Error: 'generateText' is undefined)
...on the code
var bodyText=["The....now."]
I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?
Must be in the settings of Notepad++??
I have the following code:
<html>
<head>
<title>title of this stuff</title>
<script language="JavaScript">
if (top != self) top.document.title = document.title;
</script>
<meta http-equiv="refresh" content="2; URL=javascript:window.open('certainpage.html','_top');">
</head>
<body>
Body of this page
</body>
</html>
and this doesn't work.
I've googled for this and come to the same conclusion everywhere: this should work.
But it doesn't. Can anyone help me out why this page isn't:
1. refreshing as long as I have the javascript in there (and yes, js is enabled in my browser)
2. refreshing to the new page in the top frame
Any help would be appreciated!
Javascript won't work in the refresh meta tag like that.
As you're using javascript anyway, keep it simple like this:
<script type="text/javascript">
window.top.location = 'http://domain.tld/whatever/';
</script>
But there's also a better (because smarter) way to do it. This doesn't require you to hard-code the URL for each page. It checks if the page is topmost and if not, if calls the page's URL to the top:
<script type="text/javascript">
if(window.top.location != window.location)
{
window.top.location.href = window.location.href;
}
</script>
And if you would prefer to completely avoid using javascript (which some users will have disabled), there's also an even simpler way to do it. Add the following to your head section and all links on that page will open "topmost":
<base target="_top">
All you have to do is to choose one of these three options. All of them should get you going just fine.
I am no web designer pro so please be gentle
Situation:
I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .
The site is composed of:
index.html
-> contains:
1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth...-plugin/841563)
3- An IFRAME where the other pages are loaded into
tracks.html
-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page
facebook.html
-> contains FB comments box
background.html
Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.
Question:
Are there any ways the audio-player .js code (I'll post the code in next) can be modified so that it handles play requests initialised from pages within the iframe?
Any other suggestions come to minds? (remote window? other?)
Thank you!
this what I've got on the index.html page head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>
<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;
$(document).ready(function(){
$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
});
function changeContent() {
document.getElementById('tracks').innerHTML="";
}
</script>
</head>
where, from the same page, links like this one play correctly in the player:
<ul class="fap-my-playlist">
<li>Lounge session - Bar</li>
The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?
You can indeed make something happen in one frame when something happens in another frame using JavaScript. Use the parent object from within the frame. Look here for some examples: http://www.pageresource.com/jscript/jframe1.htm
Also, you mentioned in passing that you might want to do it from another window, as well. This can be accomplished using window.opener.