CONTEXT
I am creating an http://canvimation.github.com/ that uses javascript to create web pages dynamically.
The source code for my application is at https://github.com/canvimation/canvimation.github.com
The application uses Canvas to draw using vector objects the resulting drawing can then be exported as a web page. To create a web page click on the FILE icon and then 'Export Canvas to HTML'.
The exporting code opens a new window and uses document.writenl() to construct the code. The relevant function is shown at the end of the question.
All browsers I have tried produce the drawing correctly in the new window as a web page. In all browsers view source shows the expected code for the application web page.
In IE10 and Firefox it is possible to view the source of the exported code which can then be saved and the saved file used as a webpage.
For the exported web page: in Chrome 28 view source is greyed out and not available; in Safari 5 for Windows view source produces a blank window and in Opera 12 source does not do anything.
QUESTIONS
How is it possible to save or view the source of the exported webpage in Chrome, Safari and Opera?
Can anything be changed in my method to dynamically create a webpage that can have its source code viewed and saved?
RELEVANT CODE
function exportShapes()
{
var shapelist=[];
var nameZ=[];
for (var name in SHAPES)
{
nameZ=[];
nameZ.push(name);
nameZ.push(SHAPES[name].zIndex);
shapelist.push(nameZ);
}
shapelist.sort(compareZ);
newwindow=window.open('','export');
newwindow.document.writeln('<!DOCTYPE HTML>');
newwindow.document.writeln('<html>');
newwindow.document.writeln(SPACES.substr(0,3)+'<head>');
newwindow.document.writeln(SPACES.substr(0,6)+'<style>');
newwindow.document.writeln(SPACES.substr(0,9)+'#canvasarea');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
newwindow.document.writeln(SPACES.substr(0,12)+'border:black 1px solid;');
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln(SPACES.substr(0,6)+'</style>');
newwindow.document.writeln(SPACES.substr(0,6)+'<!--[IF LT IE 9]><script type="text/javascript" src = "excanvas.js" ></script><![endif]-->');
newwindow.document.writeln(SPACES.substr(0,6)+'<script type="text/javascript">');
newwindow.document.writeln(SPACES.substr(0,9)+'function setcanvas()');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
newwindow.document.writeln(SPACES.substr(0,12)+'var canvas = document.getElementById("canvasarea");');
newwindow.document.writeln(SPACES.substr(0,12)+'if (canvas.getContext)');
newwindow.document.writeln(SPACES.substr(0,12)+'{');
newwindow.document.writeln(SPACES.substr(0,15)+'var ctx = canvas.getContext("2d");');
newwindow.document.writeln(SPACES.substr(0,15)+'drawcanvas(ctx);');
newwindow.document.writeln (SPACES.substr(0,12)+'}');
newwindow.document.writeln(SPACES.substr(0,12)+'else');
newwindow.document.writeln(SPACES.substr(0,12)+'{');
newwindow.document.writeln(SPACES.substr(0,15)+'alert("Canvas NOT supported");');
newwindow.document.writeln (SPACES.substr(0,12)+'}');
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln (SPACES.substr(0,9));
newwindow.document.writeln (SPACES.substr(0,9)+'function drawcanvas(ctx)');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
for(var i=0;i<shapelist.length;i++)
{
exportshape(shapelist[i][0]);
}
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln(SPACES.substr(0,6)+'</script>');
newwindow.document.writeln(SPACES.substr(0,3)+'</head>');
newwindow.document.writeln(SPACES.substr(0,3)+'<body onload="setcanvas()">');
newwindow.document.writeln(SPACES.substr(0,6)+'<canvas id="canvasarea" width="'+parseInt($("stagearea").style.width)+'" height="'+parseInt($("stagearea").style.height)+'"></canvas>');
newwindow.document.writeln(SPACES.substr(0,3)+'</body>');
newwindow.document.writeln('</html>');
newwindow.document.close();
}
If you are just trying to see the HTML after javascript rendering, then right-click > inspect element should let you see the code, at least in Chrome.
You should then be able to copy it manually - or do you need it to be done automatically?
I know in brython it's just in the variable doc.html, but that probably doesn't help you in javascript.
Similar Question
The problem is it's a blank page (about:blank), for which Chrome sees no reason to view the source code, because it should be empty. You may consider creating some sort of temp file and put all the canvas stuff into it.
Inspect Element option, suggested above, doesn't work in this case, it's not going beyond canvas tag. I suspect Chrome is rendering this as a picture, not as a vector graphics.
Related
I created a little demo here: https://codepen.io/min-width/pen/LYVVLwK
But just in case that gets lost in time, here is the JavaScript from that page (it's constructing a script tag with a type of "module" and injecting it into the page):
let value = `<script type="module">
let element = document.createElement("p");
element.appendChild(document.createTextNode("The JavaScript executed."));
document.querySelector("body").appendChild(element);
</scr` + `ipt>`;
let compiled =
document.createRange().createContextualFragment(value),
body = document.querySelector('body');
body.appendChild(compiled);
When working, it should say "The JavaScript executed" in the body of the page. This works fine in most browsers (and I accept that it doesn't work in IE since IE doesn't support modules at all).
My issue is that this does not work in Edge, even though Edge does have support for JavaScript modules: https://caniuse.com/#feat=es6-module
Edge just doesn't seem to like when modules are injected dynamically. Is there some client-side workaround for this? I currently have it working with a server-side check for "Edge" in the user agent (in which case I render the module immediately in the HTML rather than injecting it with JavaScript), but that doesn't feel like an optimal solution.
In case you are wondering, my use case is that I preload some JavaScript modules, then I inject them into the page when the user first interacts with the page (a page speed optimization that PageSpeed Insights seems to like).
Edit: Since somebody asked, here is the Edge version number info (from the settings):
It shows Edge 44 and EdgeHTML 18.
I tried to modify your code and it works with MS Edge 44 version.
<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>
</head>
<body>
<script>
let se =document.createElement('script');
se.setAttribute('type', 'module');
se.innerHTML='var para = document.createElement("P"); para.appendChild (document.createTextNode("The JavaScript executed.")); document.querySelector("body").appendChild(para);';
let body = document.querySelector('body');
body.append(se);
</script>
</body>
</html>
Output in Edge browser:
We have a problem that is only evident on iOS browsers (iOS 12.0) with our SPA application that uses HTML object tags to load widgets (HTML/CSS/JS files) through JavaScript onto the page.
The issue is an intermittent one when the page is loaded some of the widgets don't display/render on the screen, yet are loaded into the DOM and can be viewed/highlighted with full element properties in the Safari Web Inspector. but are “invisible” to their user. The problem will occur about 50% of the time if there are 4 widgets to load on a page, 2 typically won't display and it will be different widgets not displaying each time, with no detectable pattern.
The widget javascript load events run properly and there are no errors in the console. In the Safari Web Inspector, we can see some of the HTML elements from the non-rendering object are loaded at position 0,0 but their style is correct in the DOM (left and top set correctly, display: inline, etc.).
Here is the code that loads the widgets (the fragment is added to the DOM after all widgets are setup):
function loadWidget(myFrag, widgetName) {
var widgetObj = document.createElement("object");
widgetObj.data = "widgets/" + widgets[widgetName].type + ".html"; // location of widget
widgetObj.className = "widget unselectable";
widgetObj.id = widgetName;
widgetObj.name = widgetName;
myFrag.appendChild(widgetObj); // build widgets onto fragment
widgetObj.addEventListener("load", widgetLoaded, false); // Run rest of widget initialisation after widget is in DOM
widgetObj.addEventListener("error", badLoad, true);
}
Here is the code in the load event that configures the widget once loaded (we work around a Chrome bug that also affects Safari where the load event is fired twice for every object loaded):
function widgetLoaded(e) {
var loadObj = e.target;
if (loadObj === null) {
// CHROME BUG: Events fire multiple times and error out early if widget file is missing so not loaded (but this still fires), force timeout
return;
}
var widgetName = loadObj.id;
// CHROME BUG: Workaround here is to just set the style to absolute so that the event will fire a second time and exit, then second time around run the entire widgetLoaded
if ((parent.g.isChrome || parent.g.isSafari) && !widgets[widgetName].loaded) {
widgets[widgetName].loaded = true; // CHROME: WidgetLoaded will get run twice due to bug, exit early first time.
loadObj.setAttribute("style", "position:absolute"); // Force a fake style to get it to fire again (without loading all the other stuff) and run through second time around
return;
}
var defView = loadObj.contentDocument.defaultView; // Pointer to functions/objects inside widget DOM
loadObj.setAttribute("style", "position:absolute;overflow:scroll;left:" + myWidget.locX + "px;top:" + myWidget.locY + "px;z-index:" + zIndex);
loadObj.width = myWidget.scaleX * defView.options.settings.iniWidth; // Set the width and height of the widget <object> in dashboard DOM
loadObj.height = myWidget.scaleY * defView.options.settings.iniHeight;
}
The code performs correctly in Chrome (Mac/Windows), IE and Safari (Mac), however, presents the random invisible loading issue in iOS Safari and also in iOS Chrome.
Any ideas what causes this and what the workaround could be?
We couldn't find the exact source of this issue after a lot of investigation and are fairly sure this is a webkit bug. However there is an acceptable workaround, which is to replace the object tag with an iframe tag, and it looks to be working exactly the same way (replace .data with .src) with a bonus it doesn't exhibit the chrome bug where onload events are fired twice, so Chrome runs our app faster now.
I am simply trying to change the SRC attribute of an image via javascript like so:
document.getElementById('fooImage').src = img;
Where img is a variable that has a link to the file.
In all other browsers (Chrome, Firefox, Safari) this works. In IE (7+) this also works too sometimes.
Using IE's built-in developer tools, I can see that the image's SRC tag is set. Is there something else in the locals window that could help me debug why the image doesn't actually show on screen?
I've also tried using jQuery to do this and same outcome:
$("#fooImage").attr("src", img);
An ideas?
In debugging this I would hard code it first...
document.getElementById('fooImage').src = "myimage.png";
I've used the following in my website and it works like this...
var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/1.png";
Some other things to check:
Make sure your ID= tag is not in the <DIV section but inside the <IMG section... for example <div class="style1"><img src="yourpicture" id="someid">. If `id='someid' is in the div tag then you can't change the picture / the picture won't show up.
are you using window.onload?, body onload? the proper way to use the first is..
window.onload = function () { YourFunctionHere(); };
Try a different test image. I had issues in the past with showing png's, I changed it to a gif or jpg and it worked. I don't understand how that was "way back" but it doesn't seem to be an issue anymore but hey... something to try.
try a full url
using https?
try sticking the image somewhere else in your program and see what happens.
try adding this to your HTML (put your website in place of mine - lookup BASE href on google for more info)
<BASE href="http://perrycs/" />
Make sure the image isn't hidden behind a layer (I know it works in some browsers)
tell us the website so we can check it out and get more info to help you in debugging this, seeing context (surrounding code) helps...
Given that it works in other browsers, searching on this topic it seems that often the problem is how IE caches images (ref. Epascarello's comment). Your code is the same as what I have - it works fine except in IE10.
I too, faced this conundrum. Then discovered that it works in 'Page Inspector', so after some digging discovered that (in Internet Explorer) by going to Tools.Internet Options.Advanced
uncheck the 'Disable script debugging (Internet Explorer)' and the one below it.
I found that with IE9 after changing an image.src with
var strVar="C:Users/x/Desktop/caution.png"
image.src=strVar
and calling an alert(image.src) I would get something like this n the alertbox:
file:///C:Users/x/Desktop/"C:Users/x/Desktop/caution.png"
So I tried
image.src=strVar.replace(/\"/g,"")
to remove qoutemarks
and it worked!
alert(image.src)
file:///C:Users/x/Desktop/caution.png
EDIT: Mozilla fixed the bug. This thread is dead.
EDIT: This is a Mozilla bug. See this thread: https://bugzilla.mozilla.org/show_bug.cgi?id=501853
I have a sprite I use for my images here: http://www.trailbehind.com/site_media/images/sprite.png
In FireFox 3.5, the sprite seems to get fetched every time I render an icon on my map, you can see the behavior in the Firebug Net Panel when you load this page and/or pan the map: http://www.trailbehind.com/node/1148091/
I had previously had similar problems to this in Internet Explorer, but I had eventually gotten this working in Safari 3/4, FF 2/3, and IE 6/7/8. Now, something is wrong in FF 3.5 :(
I tried to put this code in the of the document to prec-cache the image, but to no avail:
var pre = new Image();
pre.src = "/site_media/images/sprite.png";
Here's the code that later creates the map markers (and fetches the sprite image again). It might be GMaps related - it doesn't seem to fetch a sprite to draw each icon or otheer image on the left... just the map.
//returns an image-like GIcon based on a sprite
function getGIconSprite(attr) {
var myicon = new GIcon(G_DEFAULT_ICON);
myicon.sprite = {image:"/site_media/images/sprite.png", top:0};
myicon.iconSize = new GSize(16,16);
myicon.iconAnchor = new GPoint(8,8);
myicon.shadow = null;
myicon.sprite.left = attr.offset*16;
return myicon;
}
This is official FireFox 3.5 bug. Simple hack for it is to create two class for all snipped object: one common for all with background image, and the second one with background position.
That's all kids!)
There seems to be a problem with FireFox 3.5 loading images from the server and not using the cache properly. Google "firefox 3.5 not caching images" and you will notice a lot of people noticing this problem.
it is gmaps JS related. you should use a pointer (copy of variable) to the existing variable, such as:
defaulticon.sprite = {image:"/site_media/images/sprite.png", top:0};
myicon.sprite = defaulticon.sprite;
myicon2.sprite = defaulticon.sprite;
etc.
I see you use Lighttpd. You might want to use Module: mod_expire for your static files. Set them to expire after a month or even more. You can find more information about this on Yahoo.
I need to background load some WAV files for an HTML page using AJAX. I use AJAX to get the details of the WAV files, then use the embed tag, and I can confirm that the files have loaded successfully because when I set autostart to true, the files play. However, I need the files to play only when the user clicks on a button (or an event is fired). The following is my code to preload these files:
function preloadMedia() {
for(var i = 0; i < testQuestions.length; i++) {
var soundEmbed = document.createElement("embed");
soundEmbed.setAttribute("src", "/media/sounds/" + testQuestions[i].mediaFile);
soundEmbed.setAttribute("hidden", true);
soundEmbed.setAttribute("id", testQuestions[i].id);
soundEmbed.setAttribute("autostart", false);
soundEmbed.setAttribute("width", 0);
soundEmbed.setAttribute("height", 0);
soundEmbed.setAttribute("enablejavascript", true);
document.body.appendChild((soundEmbed));
}
}
I use the following code to play the file (based on what sound file that user wants to play)
function soundPlay(which) {
var sounder = document.getElementById(which);
sounder.Play();
}
Something is wrong here, as none of the browsers I have tested on play the files using the code above. There are no errors, and the code just returns.
I would have left it at that (that is - I would have convinced the client to convert all WAV's to MP3 and use MooTools). But I realized that I could play the sound files, which were not dynamically embeded.
Thus, the same soundPlay function would work for a file embeded in the following manner:
<embed src="/media/sounds/hug_sw1.wav" id="sound2" width="0" heigh="0" autostart="false" enablejavascript="true"/>
anywhere within the HTML.
And it plays well in all the browsers.
Anyone have a clue on this? Is this some sort of undocumented security restriction in all the browsers? (Please remember that the files do get preloaded dynamically, as I can confirm by setting the autostart property to true - They all play).
Any help appreciated.
Hmm.. perhaps, you need to wait for the embed object to load its "src" after calling preloadMedia() ?
Are you sure that the media file is loaded when you call soundPlay() ?
i know your question got a bit old by now, but in case you still wonder...
soundEmbed.setAttribute("id", testQuestions[i].id);
you used the same id twice, yet getElementById returns only one element, or false if it doesn't find exactly one matching element.
you could try something like this:
soundEmbed.setAttribute("id", "soundEmbed_"+testQuestions[i].id);
always keep in mind that an id must be unique
Just a tip for more compatibility:
I read here that width and height need to be > 0 for Firefox on MacOS.