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

Question

Возможно, ответ на этот вопрос менее сложный, чем я делаю это ...

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

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

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

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

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

Answer 1

В его самых простых:

Создать .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 widgets, разрешают это, позволяя пользователю выбирать цвета, фоновые изображения и т. Д. На странице настроек.

Answer 2

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

Answer 3

Ceejayoz & Джо уже покрыли 2 основных варианта, Javascript или IFrame.

Если вы хотите ознакомиться с некоторыми примерами, взгляните на StackOverflow flair feature, что делает именно то, что вы пытаетесь сделать, и позволяет пользователю встраивать окно информации о пользователе 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>