Как отобразить iframe с помощью фрагмента Javascript? - PullRequest
Новая
       6

Как отобразить iframe с помощью фрагмента Javascript?

0 голосов
/ 12 ноября 2010

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

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:facepile></fb:facepile>

Как я могу сделать это самостоятельно - иметь на своем сервере javascript, который при вызове на удаленном сервере записывает iframe или загружает контент на их страницу?

Ответы [ 4 ]

3 голосов
/ 12 ноября 2010

Традиционный способ (считается немного запутанным; не будет работать с хост-страницами XHTML-as-XML; при вызове после загрузки страницы через асинхронный вызов взорвет всю страницу): 

document.write('<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>');

Альтернативно с innerHTML элементу на странице с предопределенным именем: 

document.getElementById('examplecomframe').innerHTML= '<iframe src="http://www.example.com/myframe" width="100" height="100"></iframe>';

Или с DOM для вставки непосредственно перед текущим <script> (хотя, опять же, это может быть непредсказуемо при отсрочке): 

(function() {
    var iframe= document.createElement('iframe');
    iframe.src= 'http://www.example.com/myframe';
    iframe.width=iframe.height= 100;
    document.getElementById('examplecomframe').appendChild(iframe);
})();

Или вставить непосредственно перед текущим скриптом: 

    var scripts= document.getElementsByTagName('script');
    var script= scripts[scripts.length-1];
    script.parentNode.insertBefore(iframe, script);

Я бы не использовал jQuery для включения сторонних скриптов. Вы должны были бы загрузить всю тяжелую платформу на вложенную страницу, просто ради нескольких строк JS. Это может привести к конфликтам с другими платформами (или другими версиями jQuery), используемыми страницей хоста, что очень грубо для стороннего скрипта.

2 голосов
/ 12 ноября 2010

Я думаю, вы можете немного запутаться, как это работает. Вот как это работает: 1. Пользователь запрашивает страницу с вашего домена / сервера, страница обслуживается. 2. Клиентский веб-браузер на компьютере пользователя интерпретирует указанную страницу, если блок скрипта содержит ссылку на файл js в каком-либо другом месте, то указанный файл js извлекается. 3. Javascript обрабатывается браузером клиентов.

Так что на самом деле все, что вам нужно, это файл JS (старый ASCII) на сервере, и он должен выполнить несколько вызовов document.write (), чтобы добавить код, который вы хотите добавить, например:

перейти к http://www.shaunhusain.com/TestIFrameViaJS

там задействовано три файла index.html anotherpage.html testIFrame.js

дайте мне знать, если это не сработает или я выбрал неправильное направление для того, что вы ищете?

Shaun

2 голосов
/ 12 ноября 2010

Чтобы сгенерировать тег с помощью jQuery, вы можете использовать $('<tagname />') и передать объект с параметрами (например, src).После этого вы добавляете этот iframe в Dom.Используя html(), вы можете установить html-содержимое выбранного элемента (в данном случае тега с идентификатором example) в свой iframe. 

$(function() {     
  var iframe = $('<iframe />', {
    src: 'http://example.com',
    width: 100,
    height: 100
  });

  $('#example').html(iframe);
});
1 голос
/ 12 ноября 2010

http://api.fatherstorm.com/test/4159620.php

с использованием jQuery для этого ... 

$(document).ready(function() {
   $('#fb-root').append('<iframe/>');
   $('#fb-root iframe')
        .attr('id','my_iframe')
        .attr('src','http://www.cnn.com')
        .css('width','100%')
        .css('height','100%')
        .attr('frameborder','no');
 });
...