Как предложить код для других, чтобы встроить ваш контент в свои HTML-страницы? - PullRequest
Новая
       16

Как предложить код для других, чтобы встроить ваш контент в свои HTML-страницы?

2 голосов
/ 15 декабря 2009

Может быть, ответ на этот вопрос менее сложен, чем я его делаю ...

У меня есть веб-приложение Zend Framework PHP. Я собираюсь создать простой API, который будет выводить отчет для учетной записи пользователя. Содержание будет таким простым: 

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Я хочу предложить фрагмент кода, который пользователь может использовать для встраивания отчета на свой сайт.

Я думаю, что это можно сделать с помощью iFrame, но я никогда не делал этого раньше, поэтому я не знаю, как лучше это сделать.

Обновление: Если возможно, я также хотел бы предложить пользователю возможность стилизовать контент. Это возможно с iFrame? Я хочу, чтобы встроенный контент выглядел максимально похожим на остальную часть страницы.

Ответы [ 3 ]

4 голосов
/ 15 декабря 2009

Ceejayoz & Joe уже рассмотрели 2 основных варианта: Javascript или IFrame .

Если вы хотите ознакомиться с некоторыми примерами, взгляните на особенность StackOverflow , которая делает именно то, что вы пытаетесь сделать, и позволяет пользователю встраивать информационное окно пользователя StackOverflow самостоятельно. сайт.

Если вы хотите увидеть, как это реализовано, посмотрите html , на который пользователь будет ссылаться с помощью IFrame, или этот Javascript , который пользователь будет вызывать со своей страницы , (см. примечания в разделе «Как использовать это» на странице SO flair .)

[Вы должны вставить свой номер пользователя в эти ссылки, чтобы увидеть соответствующие файлы html / js для себя.]

В случае SO, js / html генерируется специально для каждого пользователя. Для полноты я включил StackOverflow js / html, который достигает этого.

JavaScript: Вы можете видеть, что при выполнении это в основном записывает элемент сценария на html-страницу пользователя, который вставляет ссылку на файл SO css в заголовок. Затем он включает в себя несколько довольно простых тегов div / span, которые стилизуются CSS. Очевидно, что в этом случае пользователь может предоставить свой собственный CSS, если он хочет по-другому его оформить. 

document.write('
<script>
  var link = document.createElement(\"link\");
  link.href = \"https://stackoverflow.com/content/flair-Default.StackOverflow.css\";
  link.rel = \"stylesheet\";
  link.type = \"text/css\";
  var head = document.getElementsByTagName(\"head\")[0];
  head.appendChild(link);
</script>

<div class=\"valuable-flair\">   
<div class=\"gravatar\">       
  <a title=\"See my profile on Stack Overflow\" target=\"_blank\" href=\"https://stackoverflow.com/users/1/jeff-atwood\">
    <img src=\"http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;d=identicon&amp;r=PG\" height=\"50\" width=\"50\" alt=\"\">
  </a>  
</div>   
<div class=\"userInfo\">        
<span class=\"username\">
  <img src=\"http://sstatic.net/so/favicon.ico\" />
  <a href=\"https://stackoverflow.com/users/1/jeff-atwood\" target=\"_blank\">Jeff Atwood</a>
  <span class=\"mod-flair\" title=\"moderator\">&#9830;</span>
</span>
<br />       
<span class=\"reputation-score\" title=\"reputation score\">16,907</span>        
<br />
<span title=\"5 gold badges\"><span class=\"badge1\">&#9679;</span>
<span class=\"badgecount\">5</span></span><span title=\"55 silver badges\">
<span class=\"badge2\">&#9679;</span><span class=\"badgecount\">55</span></span>
<span title=\"72 bronze badges\"><span class=\"badge3\">&#9679;</span>
<span class=\"badgecount\">72</span></span>\r\n    </div>\r\n</div>'
);

Html - для IFrame: Вы можете видеть, что это полный HTML-документ (на самом деле XHTML, чтобы быть педантичным), который включает в себя все необходимое, включая ссылку на CSS в заголовке и содержимое в теле . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
            <link rel="stylesheet" href="http://sstatic.net/so/flair-Default.StackOverflow.css" />                
</head>

<body>
    <div class="valuable-flair">
    <div class="gravatar">
        <a title="See my profile on Stack Overflow" target="_blank" href="https://stackoverflow.com/users/1/jeff-atwood"><img src="http://www.gravatar.com/avatar/51d623f33f8b83095db84ff35e15dbe8?s=50&amp;d=identicon&amp;r=PG" height="50" width="50" alt=""></a>
    </div>

    <div class="userInfo">
        <span class="username"><img src="http://sstatic.net/so/favicon.ico" /><a href="https://stackoverflow.com/users/1/jeff-atwood" target="_blank">Jeff Atwood</a><span class="mod-flair" title="moderator">&#9830;</span></span>
        <br />
        <span class="reputation-score" title="reputation score">16,907</span>
        <br />
        <span title="5 gold badges"><span class="badge1">&#9679;</span><span class="badgecount">5</span></span><span title="55 silver badges"><span class="badge2">&#9679;</span><span class="badgecount">55</span></span><span title="72 bronze badges"><span class="badge3">&#9679;</span><span class="badgecount">72</span></span>

    </div>
</div>       
</body>
</html>
4 голосов
/ 15 декабря 2009

Очень просто:

Создайте файл .js с: 

document.write("<ul>");
document.write("  <li>Item 1</li>");
document.write("  <li>Item 2</li>");
document.write("</ul>");

Ваши пользователи будут включать этот код везде, где они хотят, чтобы ваш встроенный код появлялся: 

<script type="text/javascript" src="http://example.com/path/to/file.js"></script>

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

1 голос
/ 15 декабря 2009

iFrame будет работать лучше всего. Будет работать вызов ajax, но вам придется делать то, что делает Google, и они также должны включать в себя скрипт src с вашего сайта. iFrames - это в основном теги div, которые загружают страницу в область содержимого. Они принимают все аргументы CSS, как и любой другой элемент уровня блока, за исключением внутреннего содержимого, такого как шрифт, цвет и т. Д.

...