Как вывести часть страницы (с другого сайта) на своем сайте?

Question

[Алексей Смирнов]

Есть такая страница:
docs.google.com/forms/d/.../viewanalytics
мне нужно вывести часть этой страницы (с гистограммами) у себя на сайте. Причем предполагается, что число ответов будет постоянно обновляться.

Как это можно сделать?

Возможно, это делается при помощи iframe, но что-то у меня не получилось.
Впрочем, буду рад любым методам на HTML, CSS, JS, JQ.

P.S. Очень хотел бы увидеть готовый кусок кода.

Answer 1

[Назар Мокринский]

Можно выкачать исходник (скрипты/стили/изображения подключать из оригинальной страницы), сделать iframe с этим исходником на своем домене, добавить стиль, который подвинет html/body так, чтобы в видимости было то, что нужно (ну и overflow задать, чтобы прокрутку отключить).
Такой вариант достаточно универсальный и надежный.

Comments

[Алексей Смирнов]

@nazarpc То есть нажать на гугл странице Ctrl+U, скопировать весь исходный код находящийся между тегами < body >.
А потом этот код вставить в вот такой тег frame:

<iframe src="https://docs.google.com/forms/d/1CtXdf7JJ8ogV26wS9Thjj5dGRN_qFkVX-O802Mkcib8/viewform?embedded=true#start=publishanalytics" width="260" height="500" frameborder="0" marginheight="0" marginwidth="0">Загрузка...</iframe>
<code>

и добавить style="left:...; top:...;" ?
src - убрать естественно.

[Алексей Смирнов]

Ну и ссылки подредактировать (добавить http://)

[Назар Мокринский]

@ERAFY Если вас устроит вручную - сделайте скриншот. Иначе выкачивайте страницу скриптом, и делайте с ней то, что я написал. И нет, ссылка будет уже не на оригинальную страницу, а на вашу, обработанную.

[Алексей Смирнов]

@nazarpc Только в таком случае как я понял будут просто статичные данные. А мне нужно чтобы они обновлялись при изменении данных на странице "гугл документов".

[Назар Мокринский]

@ERAFY Так выкачивайте страницу раз в минуту, либо при каждом запросе. В чём проблема?

[Алексей Смирнов]

@nazarpc Отлично. Только что это за скрипт такой который будет выкачивать страницу? Может есть его образцы где-нибудь?

[Назар Мокринский]

@ERAFY file_get_contents(url)
Линки на стили, скрипты и изображения только поменять, чтобы абсолютные были (можно просто выставить если его нет).

[Алексей Смирнов]

@nazarpc Это же PHP. А без него никак нельзя? Просто у меня хостинг не поддерживает PHP.

[Назар Мокринский]

@ERAFY Так нужно было бы об этом написать. Что же за хостинг такой)
Можно подвигать iframe с помощью CSS, перекрыть ненужные части чем-то сверху, но это это более криво.

[Алексей Смирнов]

@nazarpc У меня вообще ничего не отображается, хотя подобную конструкцию уже использовала и она работала (в другой ситуации)...

<iframe src="https://docs.google.com/forms/d/1CtXdf7JJ8ogV26wS9Thjj5dGRN_qFkVX-O802Mkcib8/viewanalytics" width="940" height="1000" frameborder="0" marginheight="0" marginwidth="0">Загрузка...</iframe>
<code>

[Алексей Смирнов]

Где здесь может быть ошибка...

[Назар Мокринский]

@ERAFY Загляните в консоль браузера:

Load denied by X-Frame-Options: https://docs.google.com/forms/d/1CtXdf7JJ8ogV26wS9... does not permit cross-origin framing.

Google не хочет, чтобы вы включали iframe на свой сайт)

[Алексей Смирнов]

@nazarpc А как в такой ситуации быть?

[Алексей Смирнов]

Обходные пути есть?

[Назар Мокринский]

@ERAFY Без кода на сервере - не знаю таких, вероятнее всего нет, для того же оно и существует.

[Алексей Смирнов]

@nazarpc Тут есть какое-то решение на JQ: javascript.ru/forum/dom-window/21288-nuzhna-pomosh... в 10-м топике, может оно заработает...

[Назар Мокринский]

@ERAFY Попробуйте, но очень сомневаюсь.

[Алексей Смирнов]

@nazarpc Спасибо за ответы) Было приятно пообщаться)

Answer 2

[Владимир]

Попробуйте такой вариант jsfiddle.net/br3t/CvG74 (надо убедиться, что диаграммы обновляются)
Если у вас есть доступ к этому документу - там точно в настройках диарграмм есть адрес для вставки на сторонние ресурсы, можете поробовать его поискать, если это не то же самое, что в предыдущем абзаце

Comments

[Алексей Смирнов]

@br3t Хороший вариант, но диаграммы не обновляются (даже при перезагрузке страницы).

[Алексей Смирнов]

@br3t К сожалению не видел возможности вставки диаграмм на сторонние ресурсы. И думаю что там такого нету.

[Алексей Смирнов]

@br3t А можно узнать, как вы сделали подобные ссылки (в jsfiddle) ?

[Алексей Смирнов]

Наверно копировали url картинки. Как я понял после каждого обновления информации гугл создает новую ссылку на картинку.

[Владимир]

Вот сделал простую диаграмму https://docs.google.com/spreadsheets/d/1m0nUNAKhc8...
Импортировал как картинку на сайт jsfiddle.net/br3t/3ch7N
Меняю значения в табличке - меняется картинка на сайте (можете попробовать)

[Алексей Смирнов]

@br3t Вижу что у тебя работает. А как для такого типа данных построить диаграмму(ы) ?
docs.google.com/spreadsheet/ccc?key=0ApUv4Ao46rpId...

[Алексей Смирнов]

Тут словесные данные.

[Алексей Смирнов]

Хотя наверно с excel дальше сам разберусь. Спасибо!