Image removed but still using network traffic - javascript

I have a strange problem here, and i can't find any usefull results using google search, so I now ask for your help.
I have a video stream on my HTML+Javascript(mostly jQuery) application.
It is embeded like this:
<img width='300' id='videoFeedImg' src='http://IP:PORT/PAGE' />
Where this PAGE is acutally a live updating stream of pictures.
It works great!
But the problem is, that it is used on a page where it only has to be displayed when the user clicks a button. This is no problem, I just create this image shown above with the append() function in jQuery.
When the button is clicked, it is created and it is shown in the Inspection tool under Network (and it is easy to see in the Task manager Nerworking page to), and is making pretty huge network traffic.
But no matter what i do, i can't kill this stream/bandwidth. I tried to:
1. replace src with someting else
2. remove the picture
3. detach everthing i attached
4. use all kinds of jQuery functions like .stop() on the image and .empty() and .html(""); on the parent .
The only thing that works is this:
if (window.stop !== undefined) {
window.stop();
}
else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
But it is kind of drastic (maybe not??)
Does anybody have any good idears on how to stop this from loading/downloading?
Best regards
Bjarke

Related

How can I find the code that's refreshing the page?

How can I find the specific code that's causing a web page to auto-refresh?
I've looked through the source for an HTML meta-refresh, to no avail. I also can't find any Javascript "reload" in the main page, leading me to think it's perhaps externally loaded through a link javascript file.
How would a "pro" track this down, like through Firebug (or other debugger)?
Note:
I'm more interested in the process of being able to debug and track down something like this, rather than a "catch-all" solution that will stop it cold (such as disabling the Firefox-wide ability for pages to auto-refresh themselves).
The problem is most likely in a javascript file. Go through them looking for the below:
1) Look for anything that can be used to change the URL/location, redirect, or cause browser to go back:
window.location.href
window.history.back(-1)
window.navigate(”example.html”);
self.location=”top.htm”;
top.location=”error.jsp”;
2) Look for timers such as:
setTimeout()
setInterval()
3) Look for broken selectors. You may have click event handlers attached to whole DIVs, or even the whole document by accident.
There is no straightway to find the source of the refresh in javascript. Try #Steve Papa's tips on your code.Incase you want to prevent the refresh and see in the console if you can find any useful info.
To stop the refresh, use onbeforeunload event. The event object passed to the event has lot of info, but I couldnt find anything which points to the trigger. Add a breakpoint on closeIt(e), and look for clues in global variables or call stack(which i dont think will be of much use here).
function closeIt(){
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = function(e){
closeIt(e); //add a breakpoint here.
}
setTimeout(function(){location.reload()},2000);
http://jsfiddle.net/Gjuhm/4/

Page load in IE, page includes flash banner

So here is the problem.
I have a flash banner consisting of two swf's which talk to each other through LocalConnection and also call external JS functions. (I haven't figured out whether this is important or just a coinsedense.)
I also have an external JS file, which tells the banner what to do through flashVars. And has the function which the banner calls on events.
As you can imagine this works everywhere allright except IE.
In IE I expirience this problem: I try to load a test page, which has a lot of pictures and a heavy background (so it takes a while to load). And i place the banner, which is added whith javascript before all that content. Something like this:
http://pastebin.com/nnTuPPhN
And sometimes usually on reload some pictures just do not appear. All text appears though.
I did try do dig through the script, but since it's not my script it prooved to be a bit difficult, finally I came to a conclusion that even though I don't like some parts of it, there are no apparent problems with it.
FireBug and Chrome, Safari, Opera debuggers show no errors of any kind.
Now as last resort I added this to my JS file
window.onload = function()
{
alert('The page has loaded completely');
};
The outcome is that when i see all the pictures i see this message, when i don't i don't. It's doesn't help to wait for the pictures to load.
I have also found this topic:
window.onload() is not firing with IE 8 in first shot
which talks about similar problem, so it would be nice if anyone specifies what addon can cause this? QUOTE: One of the IE addons created this problem, after disabling its working fine. Thanks for your time and answers :)
As long as it isn't the flash plugin=)))
I do check for flash plugin on page this way:
var ad_checkPlugin = function(){
// From SWFObject v2.2 <http://code.google.com/p/swfobject/>
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object")
{
d = navigator.plugins["Shockwave Flash"].description;
return (d && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin))
}
else if (typeof window.ActiveXObject != "undefined")
{
try
{
var d = new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version");
// new window.ActiveXObject(...) will return null if ActiveX is disabled
return d?true:false;
}
catch(e)
{
return false;
}
}
}
And there was another way which caused the same problems in Ie, so i guess it's not the problem with the plugin check.
I would be happy if you tell me general things which can cause such problems, i can also ad the script if you guys ask for it.
And i will be even happier if you tell me specific things=)) , if you're going to say that problems lie whithin the script I will no be able to agree or disagree I've cheked and see no problem, browsers see no problems too. But it must be there somewhere since it doesn't work.
UPDATE: I also have alerts every where in my JS now, now what i witness is this: in FF for example sometimes i see the alert
alert('The page has loaded completely');
but I am not left any time to click this one(click ok), when another alert pops up. Is that a normal thing for alerts? I should add that many of the alerts are in function called by the banner.
UPDATE no2:
I've isolated the problem even more I stopped any calls from flash to JS functions at all (First i tried to replace them with alert("hello world"); that didn't help the loading problem).
Now when flash doesn't call to JS the page loads just fine. Of course i need the flash to call external functions.
Anyway NEW QUESTION : could javascript called from flash make IE think that everything is loaded and it can stop, that is can it be something like:
clean your room (and two seconds later)
now brush your teeth
result: the room is half clean but the teeth are
I might add that whatever loads on the page, some things load always: text, spaces fo future pictures but that may just be a coincedence, apart from this there is no system at all to what has, and what hasn't loaded.
---------------------------> ANWSER FOUND
Thanks))) for voting for my question, and here is the anwser guys! The function used in flash namely
getURL("javascript: ...","");
is what actually stops the page from loading! Hm, rather than this it's better to use ExternalInterface(); I'll point out we are talking about AS 2.0 in AS3.0 there is no question that ExternalInterface should be used, since getURL is now navigateTo or smthg.
Thanks to the guy who wrote this AS to realise what the problem was=)
Just copying anwser from above so the question is solved
The function used in flash namely
getURL("javascript: ...",""); is what actually stops the page from
loading! Hm, rather than this it's better to use ExternalInterface();
I'll point out we are talking about AS 2.0 in AS3.0 there is no
question that ExternalInterface should be used, since getURL is now
navigateTo or smthg.

Problem controlling SWF from javascript

Quite simply, I have a SWF embedded in an HTML web page and want to move to a specific frame when a trigger is clicked.
But nothing happens when I click the trigger, as though the js just doesnt communicate at all with the swf.
SWF is written in flash cs4 (a3)
The link to the website is http://simplywebdzine.com/test.html.
I have read the text books over and over and researched high and wide on the internet and as far as I see I have done everything correctly but I cannot get this to work.
The swf is very basic, just a green box moving accross a small stage.
The desired gotoframe would make it cross at a lower height (just a dry run for a more complicated swf)
Would really appreciate someones help if you could possibly find out from the source code what is going wrong.
Many thanks
Steve
It looks to me like you have two problems.
You do not have the correct id for your <object> according to your javascript. The object id is "mymovi.swf" while your javascript is targeting "mymovi" as the id.
Even if I change your id using firebug, the function still does not fire off in the flash and I get an error about the function not existing.
Have you added a callback method in flash? something like flash.external.ExternalInterface.addCallback("GotoFrame", gotoFrameHandler) ??

How can I monitor users clicking on links via Javascript?

I've been tasked with determining if it's possible to detect link clicks with javascript.
I'm aware of the onclick attribute, which gets me part of the way there. Other then that, I don't know what the best approach is. I've already told my boss that it will likely involve some form of ajax, which probably involves a big library, which is not acceptable.
Is there any other way then to use ajax, or anyway to use ajax that won't add a lot of time?
Edit: He wants to be able to tell how many times users use the links on the homepage of the site. Unfortunately, we can't do a slick server side solution because nearly all of the pages on the site are just plain html . I would love to convert all the pages to php or some other alternative and just take note of HTTP_REFERRER data, but that's not currently possible.
We're already using Google analytics; it doesn't record the referrer data.
Edit again: It turns out that my boss hadn't seen the overlay, and I assumed he clicked through all the tabs. Upon my investigation, initially they were all reporting zero clicks, but I discovered that we had the old version of google's analytics blurb in place. A quick upgrade to the new hotness one and the problem is solved.
Thanks to all the responses.
Actually, Google Analytics does track this data. If you go to the Content Overview page of your report, there is a link for Site Overlay. This will show you your website overlaid with the number of clicks on each link on the page.
site overlay example http://okay-plus.com/dropbox/img/site_overlay.jpg
If this is for data collection about website usage, have you considered Google Analytics instead?
Wont go into discussion about whether this is a good idea or not, but here is some code that does what your header asks.
As you put it yourself, the onclick event is one way to go. You need to create a script that loops through the a tags and assigns an onclick event to them. Something like this:
<script type="text/javascript">
window.onload = function() {
var a = document.getElementsByTagName("a");
for(var i=0; i < a.length; i++ ){
a[i].onclick = function() { alert("link clicked"); };
}
}
</script>
If you want to tell the server about the click you would need an AJAX call instead of the alert :) That snippet goes into the head section to work.
Another way to go about this is to listen on the general window.onclick event and trace the object being clicked, if it's an a tag you can execute whatever code you wish.
jQuery.min.js is 30k in size or under. That's not big.
Why does your boss want to monitor link clicking anyway? If it's to URLs on your own site then you should be able to get that from access logs or Google Analytics anyway (or some more useful variant of that information).
If you end up using jQuery (as one of the posters here have recommended) you can intercept all link fairly easily. For example, if you wanted to count how many times each link was clicked (indexed by id), you could code something like this:
var clickCount = [];
$('a').click(function() { clickCount[$(this).attr("id")]++; return true; });
For some reason, if you cannot use google analytics, try handling the window.onclick event and from the event object you can read the src element. This would tell you the object on which click event is triggered. (I believe click will be triggered for both keyboard and mouse.
Sample code written only for IE. If you need other browsers, you may have to modify the code
document.onclick = function()
{
alert(window.event.srcElement.id);
}
In addition to Google Analytics, you might wish to check out ClickTale. It offers site overlay plus quite a few features Google doesn't.
By the way, you can also tag up your external links and get GA to track them as well:
"How do I manually track clicks on outbound links?"
Another great tool you might want to check out is http://mouseflow.com. Mouse tracking, video playback and heatmaps.
in RXJS:
import { fromEvent } from 'rxjs';
const source = fromEvent(document, 'click').pipe(
filter(value => (value as any).toElement.localName === 'a'),
map(value => (value as any).toElement)
).subscribe(value => {
track('Clicked Outbound Link', {link: value.href})
})

HTML CSS: Iframes/Dynamic Problem

I am having some trouble creating a experimental 'dynamic' style website. The site is set up as follows. The user has a menu of links to choose from, specifically using an image map. When they hover over a selection, an iframe pops up (becomes visible) displaying some data. When the user removes the mouse the iframe goes away, until the user hovers over another link.
-- It seems to be working well, but only intermittently. Sometimes after leaving one of the anchors, the syle, text etc. still occupies the frame even after i hover over another link. This behavior seems to be fairly random, but there must be a way to fix it.
Here's an example of what i'm using. The show function sets the frame to visible if the argument is a 1, and hidden if 0. frameset sets the main frame to the desired html document. I tried implementing a reset to set the frame to something blank after leaving the link to try and fix it, but the problem persists.
<area shape="circle" coords="..." href="..." onmouseover="Show('frame', 1);
frameset('page.html');" onmouseout="Show('frame', 0); reset();" />
And the functions
function frameset(a)
{
document.all.frame.src=a;
}
function reset()
{
document.all.frame.src=blank.html;
}
It's a very hard problem to describe, so let me know if more information or code is needed. Any better alternatives to my method are also welcome, considering i'm not fluent in javascript :)
Thank you
I think what you are doing could be performed better by using a more modern approach.
The image map could have absolutely positioned block level anchor tags.. but this doesn't seem to be the problem.
Instead of using iframes, I'd recommend using AJAX to get the information and a framework like jQuery to help you display the data.
You could load the AJAX and display the box with a loading throbber (http://www.ajaxload.info) on mouseover, and parse the data into viewable format inside the div.
Learning AJAX
AJAX is when a page makes a http request to the server and can also return data which is then used with Javascript to update the DOM.
jQuery is a Javascript framework designed to abstract away browser specific code and inconsistencies and just make using Javascript a better experience.
Check out jQuery's AJAX functions
Good luck!!

Categories