Raphael.js Newbie: Как создать ссылку для открытия графа Raphael в моем браузере? - PullRequest
Новая
       17

Raphael.js Newbie: Как создать ссылку для открытия графа Raphael в моем браузере?

1 голос
/ 12 мая 2011

если у меня есть страница для розыгрыша raphael.js в <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>

Моя ничья Рафаэля: 

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

Я хотел бы создать ссылку на страницу, когда пользователь нажимает на ссылка, график Рафаэля в <div id='my-canvas'> будет открыт в собственном браузер, как это сделать?

Ответы [ 2 ]

1 голос
/ 12 мая 2011

Если вы можете поместить свой код 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>

Однако блокировщики всплывающих окон будут жаловаться, поэтому я бы по возможности использовал диалог или лайтбокс на той же странице.

0 голосов
/ 12 мая 2011

Ссылки в новых окнах (даже если идентификатор является href) отправляют новый URL-запрос на сервер - например, http://the-page-you-started-on/#my-canvas, который перезагрузит страницу, на которой вы находитесь, и найдет указанную idиз хеш-значения.Я не уверен, как это вписывается в спецификации HTML, но быстрый jsfiddle показал это поведение.

Так что вам нужно немного переосмыслить свою стратегию и создать новую страницу с рисунком.

...