Question

CONTEXT

我正在创建一个http://canvimation.github.com/，它使用javascript动态创建网页。

我的应用程序的源代码位于https://github.com/canvimation/canvimation.github.com

应用程序使用Canvas使用矢量对象绘制，然后可以将生成的绘图导出为网页。要创建网页，请单击“文件”图标，然后单击“将画布导出为HTML”。

导出代码打开一个新窗口并使用document.writenl（）来构造代码。相关功能显示在问题的末尾。

我尝试过的所有浏览器都会在新窗口中正确生成绘图作为网页。在所有浏览器中，视图源显示应用程序网页的预期代码。

在IE10和Firefox中，可以查看导出代码的来源，然后将其保存，并将保存的文件用作网页。

对于导出的网页：在Chrome 28中，查看源显示为灰色且不可用;在Safari 5 for Windows中，视图源生成一个空白窗口，而在Opera 12中，源代码无效。

问题

如何在Chrome，Safari和Opera中保存或查看导出网页的来源？
我的方法可以更改任何内容来动态创建可以查看和保存源代码的网页吗？

相关代码

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();
}

Answer 1

如果您只是在javascript渲染后尝试查看HTML，请右键单击＆gt; inspect元素应该让你看到代码，至少在Chrome中。

然后您应该能够手动复制 - 或者您是否需要自动复制？

我知道在brython中它只是在变量doc.html中，但这可能对javascript没有帮助。

查看动态创建的网页在某些浏览器中不可用的来源

2 个答案: