在某些浏览器中无法查看动态创建网页的源代码答案

【问题标题】：View source not available in some browsers for dynamically created webpage在某些浏览器中无法查看动态创建网页的源代码
【发布时间】：2015-07-29 12:25:01
【问题描述】：

上下文

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

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

应用程序使用 Canvas 使用矢量对象进行绘制，然后可以将生成的绘图导出为网页。要创建网页，请单击 FILE 图标，然后单击“Export Canvas to 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();
}

【问题讨论】：

标签： javascript html canvas dynamic

【解决方案1】：

如果您只是想在 javascript 渲染后查看 HTML，那么右键单击 > 检查元素应该可以让您看到代码，至少在 Chrome 中是这样。

然后您应该能够手动复制它 - 还是需要自动完成？

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