фреймы с помощью jQuery - PullRequest
Новая
       30

фреймы с помощью jQuery

4 голосов
/ 09 февраля 2010

У меня есть скрипт, который является чисто JS, который берет код и вставляет его в iframe: 

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = document.getElementById('contentsframe');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write(html);
iframe.document.close();

Я хотел создать плагин jQuery, так как я часто использую этот фрагмент кода, я попробовал несколько способов получить iframe с jQuery: 

var iframe = $('#contentsframe');
var iframe = $('#contentsframe').contents();

Кажется, что оба они возвращают неправильный тип объекта, который необходим для вызова document.open, write или close. Кто-нибудь знает решение этой проблемы?

Приветствия

Eef

Ответы [ 2 ]

3 голосов
/ 09 февраля 2010

Я использовал тот же код, который вы указали в своем посте, и у меня нет проблем. Попробуйте что-то вроде этого: 

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = $('#contentsframe').contents().find("body").append(html);

Это должно добавить ваш код в начале тега тела iframe.

edit: в этом случае var iframe будет установлен на элемент body iframe, что может привести к путанице. $ ('# Contentsframe'). Contents () фактически ссылается на весь объект iframe.

0 голосов
/ 09 февраля 2010

Я недавно написал приложение, в котором мне нужно было делать именно такие вещи. Я нашел частые посты в интернете, но ни один из них не работал для меня. Вот то, что я в итоге использовал, это сработало.

Переменные, которые я объявил в основном коде индекса / набора фреймов. 

    <script> 
        // Global Variables     
        var index = -1;
    var panes = 0;
        var panesHeight=0;
        var pageMode=1;
        var zoomLevel=-2;
    </script>
</head>
<frameset cols="150,*" border="1" bordercolor="#ffffff">
    <frame name="leftNav" src="sidebar.html">
    <frameset rows="*,80" border="1"  bordercolor="#ffffff" >
        <frame name="main" src="main.html" noresize scrolling=auto marginheight=5  marginwidth=5><frame name="pagenav" src="nav.html" noresize scrolling=no marginheight=5  marginwidth=5>
    </frameset>
</frameset>

Затем использовал такие вещи, которые мне нужны для хранения переменных и доступа к фреймам. Это работает довольно хорошо и хорошо работает с jQuery. Мне интересны ответы, так как я хотел бы очистить этот код, если это возможно. 

    if (window.parent.pageMode == 1) {
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" onclick="if(window.parent.pageMode==1){nextPage();showPages();}" style="cursor:e-resize;" >');
    }else{ // mode 0
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" align="right"  onclick="if(window.parent.pageMode==0){prevPage();showPages();}" style="cursor:w-resize;" >');
        $('#right', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 2].image + '" width="' + zoom + '" align="left"  onclick="if(window.parent.pageMode==0){nextPage();showPages();}" style="cursor:e-resize;" >');
    }
...