Question

如果我在<div id='my-canvas'></div>

中有一个raphael.js绘图页面

<body> 
  <div id='part_one'>...</div> 
  <div id='my-canvas'></div> 
  <div id='part_three'>...</div> 
  <a href="#"> //Create a link here to open the raphael graph ( at 
<div id=`my-canvas`>) in own browser 
</body>

我的拉斐尔画：

var paper = Raphael("my-canvas", 320, 200); 
var c = paper.rect(40, 40, 50, 50, 10); 
...

我想在页面上创建一个链接，当用户点击时链接，<div id='my-canvas'>处的raphael图表将自行打开浏览器，怎么做？

Answer 1

如果您可以将Raphael.js代码放入一个脚本中，然后按这样进入新窗口：

<script type="text/javascript">
function clickOpen() {
    var mywin = 
        window.open('', 'name', 'height=240,width=360,status=0');
    mywin.document.write(
        '<html><head><title>My Raphael Window</title></head><body>' +
        '<div id="part_one">...</div>' + 
        '<div id="my-canvas"></div>' +
        '<div id="part_three">...</div>' +
        '<script src="http://yandex.st/jquery/1.6.0/jquery.min.js"><' + '/script>' +
        '<script src="http://yandex.st/raphael/1.5.2/raphael.min.js"><' + '/script>' +
        '<script type="text/javascript" src="raphael_draw.js"><' + '/script>' +
        '</body></html>');
    mywin.document.close();
}
</script>

<button onclick="clickOpen()">Click me</button>

然而，弹出窗口阻止程序会抱怨，所以如果可能的话，我会在同一页面上使用对话框或灯箱。

Answer 2

新窗口中的链接（即使id是href）向服务器发送新的URL请求 - 如http://the-page-you-started-on/#my-canvas，它将重新加载您所在的页面并找到指定的页面来自哈希值的id。我不确定这是如何符合HTML规范的，但是快速jsfiddle显示了这种行为。

因此，您需要重新考虑一下您的策略并创建一个新的页面，其中包含绘图。

Raphael.js新手：如何在我的案例中创建一个在自己的浏览器中打开raphael图的链接？

2 个答案: