I have a mini application and on some states of the application I embed a YouTube video as the source parameter of an IFrame:
Such as this:
https://www.youtube.com/embed/XXVIDEO-IDXX?autoplay=1&showinfo=0&controls=0
See Embed a player using an iframe tag
On IE10, once I destroy the iframe, I get a repeating console log saying:
Script5009 - "Array" is undefined
The code spawning this error loop appears to come from html5player-new.js and halts on this code. for( var d = Array(arguments.length-1)...
My question is 2 fold:
Is there a specific process I should follow when it comes to the removal of an IFrame or its parent element? (Especially in IE10).
Since html5player-new.js is throwing the error how can I track that back to my code? I am not suggesting the player is broken as it is used a million times a day, but I have 3 lines of code to create/src/add a iframe. Likewise an equal amount of code to remove it from the dom and null it so, that leaves me little to debug.
In the 2 weeks since this question was written, the problem appears to have been resolved and I no longer get any errors on W8 and W7 with IE10.
Related
I embed a video on a Blazor-powered static page. I want the video to loop. According to docs (https://developers.google.com/youtube/player_parameters#loop), I need to have both loop and playlist params. Easy enough.
So I generate URL like this: https://www.youtube-nocookie.com/embed/tFbVZCbLhOk?autoplay=1&loop=1&modestbranding=1&disablekb=1&playsinline=1&rel=0&fs=0&playlist=tFbVZCbLhOk&controls=1&origin=http://localhost:5134 - as you can see, loop is set to 1, and playlist is set to the same video itself tFbVZCbLhOk.
The problem I am having is that when the video is embedded (or the link is accessed directly - the issue occurs there as well), it errors with This video is unavailable. Refreshing the page fixes that, however it of course is less than perfect. I am not sure what causes this, as some videos appear to randomly work on first attempt - but it's inconsistent, cause the same video might fail other time.
Removing the playlist param fixes the issue, but then the video doesn't loop properly, which is even worse for my use case.
I am not sure if it's a regression on YouTube's side, as a month or two ago, I did not have that issue - I think so at least.
It also seems like it's not bound to the tab or anything like that - when I open video once, next time I open it on a separate tab, it works - almost like if YT took its sweet time to create playlist for the video, but that's just my guess
I tried your video sample (i.e. tFbVZCbLhOk) and with the following code (which I modified from this answer), and the looping of the video works fine:
https://www.youtube.com/embed/tFbVZCbLhOk?enablejsapi=1&loop=1&playlist=tFbVZCbLhOk&autoplay=1&rel=0&showinfo=0&color=white
Probably what you're describing is another YouTube undocumented change.
<iframe onload="this.src+='';this.onload='';"
This reload once the iframe and after that it stops. I hope it will help you.
I'm writing a WP plugin that makes changes to tags and categories. After making my selections and submitting the form, the page reloads and executes wp_set_post_categories and/or wp_set_post_terms.
It works fine even in other Chromium based browsers, but when I try it in Chrome, it throws the following error:
Error code: RESULT_CODE_INVALID_CMDLINE_URL
There's a "Learn more" link, but nothing happens when I click it.
After refreshing the page, I can see that my script did what it was supposed to do, but I'd like to eliminate this error if possible.
I found this support page about the error code, and I turned on logging to see if that would give me any clues, but I don't really know what to look for.
Please let me know if there is any additional info I can add that might lead to an answer. Thanks!
I don't know what might have caused your problem, but I know a problem that causes this error. So even if it is too late someone may benefit from it. I found your question when I was answering a related problem here. you can read it if you want, but in short this happens when an array of length infinity is created. (like a
stackoverflow
). If you want to regenerate such an issue you can use this js code below.
let arr = [];
let arrcounter = 13;
for (let x = 1; x <= arrcounter; x) {
arr.push(x);
}
This is an infinite loop that adds an element to an array.
This might not be your exact problem, but I hope this helps.
I was running into this problem too, and I found in the end that my web app was running out of memory. So #EHM is right - an infinite loop that keeps adding to an array will eventually run out of memory and cause this issue.
But in my case, it was running out of memory because the js heap was not getting cleared after each page refresh. For testing purposes, I was running a puppeteer script that refreshed the page many times, and after 40 or so refreshes it would crash with the RESULT_CODE_INVALID_CMDLINE_URL error.
I'm not sure why chrome was not clearing the heap between refreshes, but this type of issue has been reported before under certain conditions, see this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=113983.
Without digging too much here into why it can happen, I will post here how to detect if your memory is getting out of control. You can use the chrome dev tools performance monitor, a built-in part of chrome dev tools:
The official docs on the performance monitor are here: https://developers.google.com/web/updates/2017/11/devtools-release-notes#perf-monitor
In case that link stops working, here are the basic steps:
Open chrome dev tools while on your web site with a memory issue
Press cmd-shift-P to open the command palette. Search for "Performance Monitor"
Once the perf monitor is open, watch the heap size in real time. While watching the heap size, reproduce the condition that causes the RESULT_CODE_INVALID_CMDLINE_URL. You should see the heap size gradually increase until the error occurs.
Now that you can see the memory leak happening, try to isolate what part of your code is causing a memory leak. Chrome dev tools has other tools to record heap usage and isolate which objects are being allocated. You may have an infinitely growing array, like #EHM mentioned, or a number of other issues. In my case, Chrome didn't seem to be releasing certain DOM nodes between refreshes. I was able to fix my script by navigating to a different domain between refreshes, which caused chrome to correctly release all the DOM nodes. To learn all about finding memory issues in chrome, read their article on the topic here: https://developers.google.com/web/tools/chrome-devtools/memory-problems
I have a very pretty calendar report that I've created on one machine, that shows my company's daily revenue as a color coded block for every day for the past several years. After finally getting a color scheme down and pretty much finalizing it, I went to test it on another machine - and hit a rather large obstacle.
This is the report that I used as a template:
http://bl.ocks.org/mbostock/4063318
It's awesome. And, inside Internet Explorer 11, it looks fantastic. I never would have expected that copying the code and testing the report would produce a blank page, but there it is. On that page, the calendar report is visible. In IE 11. Copying the code to a new html file and opening it, shows nothing. In Firefox, however, everything is visible. as is.
Now, there's a part of that page that points to "//d3js.org/d3.v3.min.js"
And I figured out that in order to make that work in firefox I had to add the http: in front, so that's not my issue.
I'm literally sitting here at my desk staring at two browser windows open and pointing to the same html file. One contains my beautiful report, one is a completely blank page.
Some cursory google searches reveal that IE 8 or lower have issues with the svg. I can't seem to find any references on someone having a similar issue though. Their situation seems to be that with IE10, you need to specify the height and width, not just one or the other, to make sure everything scales properly.
If I could have my way, I'd just run Firefox on all of the machines that are going to run the report, even if it's just for that one thing! Alas, I am but a mere peasant coder and so I have to make it work. in the dreaded IE.
Are there any svg/html/d3.js coders out there that can tell me another way to spit out the data I'm using so that I can get what I'm looking for?
copying the code and testing the report would produce a blank page
Because you're outputting invalid HTML. There is no html or head element for starters.
Output your code in to a file like example.xhtml and open it in Firefox (specifically) as it's XML parser will very quickly tell you what line and column the first XML parser error is occurring on. You are rendering in standards mode instead of quirks though that does not imply your page meets standards.
var m=(document.compatMode == 'CSS1Compat') ? 'Standards' : 'Quirks'; window.alert(m+'-mode.');
I'm using Firefox developer edition, trying to debug a page (html+javascript) in a frame.
With Firefox 33, in the debugger section I can see the source code of the page inside the frame, activate breakpoints...
My problem with developer edition is that it doesn't show the html code of the page, although it is selected in the left side of the toolbar. It shows some html code, but it's not from the selected page. I can't locate where is it from.
Is there a way to have the same behaviour in debugger for firefox 33 and developer edition?
Thanks in advance, best regards
This is what GC does to you
Short answer, the HTML of the frame was being garbage collected away by the browser engine. This happens when the page/html has no script active on it which has still some work left to do.
This can be otherwise prevented by holding a strong reference to any object in the page and putting it somewhere where the browser thinks that its still being used.
For example,
window.foobar = some_object_from_the_page
will work.
Here is the root cause and a potential & partial fix is coming up in near future.
Currently, I'm investigating several tips/recommendations for improving the performance of web sites. So, I've started with Steve Souders' excellent books (High performance web sites and even faster web sites), but I've got a couple of questions regarding some of the rules that are presented. FOr instance, chapter 5 of High performance web sites say that CSS stylesheets should be put at the top of the page because putting them at the bottom stops the progressive rendering that is performed by the browsers. According to Steve, some browsers (most notably IE) do get stuck with it and show a blank page instead of showing the items progressively. Here's the url for that test page:
http://stevesouders.com/hpws/css-bottom.php
Now, I do understand that we're talking about a book with a couple of years and that browsers (including IE) have been updated and improved. The reason I'm asking this is because I can't reproduce the behavior he mentions with any current version of FF, Chrome or IE.
Well, the thing is that Yahoo (http://developer.yahoo.com/performance/rules.html#css_top) and google (https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead) still say that.
So, what I'd like to know is if browsers have evolved in this area and this is only problematic for, say IE 8? If that is the case, why haven't yahoo and google updated their recommendations? (btw, I've tried simulating IE7 from within IE11 and still don't see the expected result that is described in the book...)
*UDPATE*One more final note: I've decided to reproduce Steve's cgi script in asp.net and I've created a simple generic handler that does the same thing as the sleep.cgi script. what I'm seeing here is that putting a stylesheet reference (which takes some time to load - I've went with 10 seconds) inside the head ends up producing the blank page problem that is reported in the book. If you put at the end, the browser ends up rendering everything and making a second pass for applying the styles after they have been loaded. In my opinion, this makes sense because when you put the style in the header element, the browser is holding up until it gets the styles before rendering (notice that the other referenced components are still being downloaded on the background, but they're not being shown in the screen). On the other hand, when they're at the bottom, the browser will simply apply the current styles until it gets stuck in the stylesheet. WHen that happens, it will only show the html it has loaded until the stylesheet (if there are any images below it, the browser will still download them but it will only render them after the styles have been loaded).
So, after these tests, I'm starting to think that 1.) I'm missing something here or 2.) yahoo and google recommendations are no longer valid today.
Thoughts?
Thanks guys!
Simply inserting a <link> tag in the footer is not the way to defer stylesheets. The currently accepted method is to attach it using javascript:
<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>
Optimizing your page for speed involves determining what CSS is above the fold, inlining that part in the header, and loading the main stylesheet later using the above method.
I recommend doing some searches for "above the fold css" and check out Google Pagespeed Insights.
https://developers.google.com/speed/pagespeed/insights/