I got a JS problem, I want to excute a JS function after the whole page shown,the struct of the page such as:
<iframe id="i_frame" src="xxx.jsp"></iframe>
and the JS included in the xx.jsp:
...
<head>
...
<script type="text/javascript" src="yy.js"></script>
</head>
yy.js:
$(document).ready(function() {
var i_fram = $(window.parent.document).find('[id="i_frame"]');
$(i_fram).load(function() {
alert('trigger!');
});
});
this works well on PC(chrome), but on Iphone4s(IOS8.1, Safari), the alert trigger befor the page completely shown, even it alert befor the bottom-half of the page shown.I'd tried:"http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onpageshow", it still has this problem.
Is there something different between Safari's renderer and other browsers?
Related
I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>
I bought this program that created a pretty nice imageuploader flash script however I can't get the Javascript function close window to close the popup and redirect the original page.
here is the XML piece that defines the url's:
<urls urlToUpload="upload.php?" urlOnUploadSuccess="http://www.home.com/purchase.html"
urlOnUploadFail="http://www.home.com/tryagain.html"
urlUpdateFlashPlayer="http://www.home.com/flashalternative.html"
jsFunctionNameOnUpload=""/>
This last line calls a javascript function on upload. The problem is I don't know what to call and where to put it.
Here is the HTML file that is the popup:
<HEAD>
<title>Baublet Uploader</title>
<script type="text/javascript" src="swfobject.js"></script>
</HEAD>
<BODY>
<!-- Q-ImageUploader www.quadroland.com -->
<div id="QImageUploader">
Flash Player stuff here
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("q_image_uploader.swf", "imageuploader", "650", "430", "9", "#FFFFFF");
so.addParam("scale", "noscale");
so.addParam("salign", "TL");
so.addVariable("AdditionalStringVariable","pass additional data here");
so.write("QImageUploader");
// ]]>
</script>
I found this Closing script I thought might work:
<script language="javascript">
function close_window(page) {
window.opener.location.href=page
setTimeout(function(){window.close()},10);
}
</script>
Does this go into the Popup HTML page above or would it be a separate close.js file in the root?
Thanks,
I'm really confused.
It looks like that bit of script belongs to the popup. It changes the parent window's location and then closes itself after a ~10ms delay. The function close_window most likely is being called by the Flash applet.
i have a web application that has javscript interspersed through the page. What happens is that safari will dump the source of the javascript code instead of executing it. I can reproduce this consistently.
The page is a mashup of different forms of content:
it loads flash videos using osflv and is generated via a php script on the server side. In addition the page also contains calls to Google Map's API to display a map. The content is placed in separate tabs using javascript to provide tab interaction.
I am also using mootools, and not sure if that is potentially causing issues.
Here are the javascript includes:
<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/js/sifr.js"></script>
<script type="text/javascript" src="/js/sifr-debug.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/alerts.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/autocompleter.js"></script>
<script type="text/javascript" src="/js/observer.js"></script>
<script charset='ISO-8859-1' src='/js/rac.js' language='javascript'></script>
rac.js comes from osflv, common.js and alerts.js are custom javascript code that includes custom classes and functions used to either display or manipulate data in the page.
This block of code executes in the page just fine:
<script type="text/javascript">
var whitney = { src: '/flash/whitney.swf'};
sIFR.activate(whitney);
sIFR.replace(whitney, { selector: 'h6#propertyHeadline', wmode:'transparent',css: {'.sIFR-root': {'color': '#1ca9b9' }}});
</script>
This code also executes just fine:
<script language='javascript'>
var src = '/player';
if(!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0))
src = 'player8';
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', 520, 'height', 440, 'src', src, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', src, 'FlashVars','movie=media/orig/4b845109d99d0.flv&fgcolor=0x1CA9B9&bgcolor=0x000000&autoload=off&volume=70');
</script>
This is the final snippet of code that is embedded in the html towards the bottom of the page before the end of the body tag, Safari will randomly spit out the src code in the browser at any point beyond the good maps script include:
<script src="http://maps.google.com/maps?file=api&v=2&key=googlemapsapikeyblockedout" type="text/javascript"></script>
<script type="application/javascript">
function InitPropertyDashboardTabs(){
mytabs = new TabPanel('DashboardTabPanel');
initializeGallery();
initializeSiteplan();
initializeMap('address blocked out');
}
var map = null;
var geocoder = null;
function initializeSiteplan()
{
var flashvars = {PropertyId:1,BasePath:'/',wmode:'transparent'};
var params = {wmode: 'transparent'};
var attributes = {id: 'SWFSitePlan',name: 'SWFSitePlan'};
swfobject.embedSWF("/flash/FloorplanViewer/FloorplanViewer.swf", "SiteplanFlash", "915", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
}
function initializeGallery()
{
var params = {wmode: 'transparent'};..... (more code)
This is what the page with the js dump
(source: oxid8.com)
this is what the page should look like:
(source: oxid8.com)
First, you shouldn't use the language attribute, it's deprecated.
The only thing I can see is that you use application/javascript instead of text/javascript in your HTML (there's a difference between what you specify in your HTML and the MIME-type servers use when sending a Javascript file), but I cannot reproduce any errors on Chromium/Linux with a simple test case like
<!DOCTYPE html>
<html>
<head>
<title>dkdkd</title>
</head>
<body>
<script type="application/javascript">
var i=0;
</script>
</body>
</html>
(Perhaps you can try this, too.)
Just in case: is the script element closed properly? Is all Javascript correct, i.e. does it pass JSLint?
Perhaps you can paste the full source of the HTML page (preferably on something like Pastebin), so we can have a closer look.
I guess I'll give this a shot. I was having a similar problem on some pages that used TinyMCE (javascript or even parts of my html were being displayed on the page)
MY solution was to upgrade the version of TinyMCE that I was using. v3.3 has an overhauled Webkit handler.
The issue so far as I can tell was that TinyMCE was injecting (poorly) additional blocks of javascript into the page.
This (and a handful of similar blocks) is always injected into <head>
<script type="text/javasript" src="http://www.example.com/javascript/rte/langs/en.js" onload="tinemce.dom.ScriptLoader._onLoad(this,'http://www.example.com/javascript/rte/langs/en.js', 0);">
Which, when onload fired, injected the following block into a random location in the DOM, mangling whatever it was placed on top of.
<script type="javascript" src="http://www.example.com/javascript/rte/langs/en.js">
The result of that, as seen in the Webkit Developer Tools was to turn
<td class="tab" nowrap="">
into:
<td class="ta<script stype="text=""javascript"" src="http://www.example.com/javascript/rte/langs/en.js"> "b" nowrap=>"
Since that's clearly not valid markup the resulting garbage was output.
Upgrading my install of TinyMCE from the previous stable to v3.3rc1 fixed the issue.TinyMCE Changelog references a total Webkit overhaul.
edit: By random I really mean random. It inserts the script tag in a different location each time, sometimes breaking content, sometimes not.