How to create a link to open raphael graph in own browser in my case?_问答_开发者

How to create a link to open raphael graph in own browser in my case?

开发者 https://www.devze.com 2023-03-05 04:32 出处：网络

If I have a page for a raphael.js draw in <div id=\'my-canvas\'></div> <body> <div id=\'part_one\'>...</div>

If I have a page for a raphael.js draw in <div id='my-canvas'></div>

<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>

My raphael draw:

var paper = Raphael("my-canvas", 320, 200); 
var c = paper.rect(40, 开发者_运维知识库40, 50, 50, 10); 
...

I would like to create a link on the page, when user click on the link, the raphael graph at <div id='my-canvas'> will be opened in own browser, how to do it?

If you can put your Raphael.js code into a script which you push into a new window like this:

<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>

However, popup blockers will complain, so I'd use a dialog or lightbox on the same page if possible.

Links in new windows (even when an id is the href) make a new URL request to the server- like http://the-page-you-started-on/#my-canvas which will reload the page you are on and find that specified id from the hash value. I'm not sure how this fits into the HTML specs but a quick jsfiddle showed this behavior.

So you would need to rethink your strategy a little and create a new page that has the drawing in it.