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

Question

Я видел некоторые виджеты в Интернете, которые дают пользователю возможность включить короткий фрагмент 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 или загружает на свою страницу?

Answer 1

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

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

идти к http://www.shaunhusain.com/TestIFrameViaJS

трех файлов там участвует index.html anotherpage.html testIFrame.js

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

Shaun

Answer 2

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

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

    $('#example').html(iframe); 
}); 

Answer 3

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'); 
}); 

Answer 4

Традиционный способ (считается немного неаккуратно, не будет работать со страницами хозяевах XHTML-как-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), которые используются главной страницей, что-то очень грубое для стороннего скрипта.