Ответ 1
ИЗМЕНИТЬ
Я не учитывал элемент браузера в приложении в вашем вопросе. Вот обновление, особенно для браузера в приложении.
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: ни один из приведенных ниже кодов не был протестирован; однако этот ответ дает вам рекомендации по реализации вашего решения.
Вместо iframe есть ли что-нибудь, что остается константой заголовка? Если я использую браузер в приложении, мой заголовок был невидимым. (...) Заголовок должен быть постоянным, когда я просматриваю содержимое внешнего веб-сайта.
Когда вы используете браузер в приложении:
<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>
открывается всплывающее окно, в котором отображается запрошенный URL.
Вы хотите, чтобы ваш собственный заголовок отображался в окне браузера в приложении. Я вижу два способа сделать это:
A) Вы можете заранее настроить веб-страницу, которую хотите отобразить в своем браузере в приложении, и сохранить ее на своем сервере.
Настроенная веб-страница могла включать в себя сторонний HTML-код, используя один из 4-х методов, упомянутых ниже. См. Методы 1, 2a, 2b и 2c.
Предположим, что вы сохраняете настроенную веб-страницу на своем сервере, которая выглядит так:
<div id="header"></div>
<div id="main"></div>
Страница хранится на вашем собственном сервере, по адресу: www.myserver.com
Если вы сделаете свой вызов, например: window.open('http://www.myserver.com',...), вы увидите свою настроенную страницу с вашими собственными заголовками.
B) Вы можете получить стороннюю веб-страницу с браузером в приложении, сохранить ее скрытой, изменить ее, а затем отобразить ее
Пожалуйста, прочитайте эту страницу документа Кордовы.
-
Чтобы открыть окно и сохранить его скрытым:
var ref = window.open(url, target, 'hidden = yes');
-
Чтобы выполнить script, когда готово окно скрытого приложения:
var iabRef = null; function insertMyHeader() { iabRef.executeScript({ code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);" }, function() { alert("header successfully added"); }); } function iabClose(event) { iabRef.removeEventListener('loadstop', replaceHeaderImage); iabRef.removeEventListener('exit', iabClose); } function onDeviceReady() { iabRef = window.open('http://apache.org', '_blank', 'location=yes'); iabRef.addEventListener('loadstop', insertMyHeader); iabRef.addEventListener('exit', iabClose); } -
Теперь вы можете показать окно в приложении:
ref.show();
ПРИЛОЖЕНИЕ: 4 метода использования сторонних материалов в ваших приложениях:
- Если сторонний веб-сайт предоставляет API (сложное решение, но его можно настроить)
например. Bing Search API
Некоторые веб-сайты предоставляют API, который отвечает голой информацией, обычно возвращаемой в виде строки JSON.
Вы можете использовать JavaScript-шаблон, например Mustache, чтобы создать свой HTML-код из полученного ответа JSON, будь то серверная или клиентская боковая сторона. Затем вы откроете всплывающее окно:
<div id="header"></div>
<div id="myTemplatedHTML"></div>
Если вы переходите на вариант с клиентской стороны, я предлагаю вам открыть открытое окно в javascript с вставленным html
2а. Если сторонний веб-сайт не предоставляет API: межсайтовый javascript-вызов
Прочитайте эту тему: Загрузка страницы html перекрестного домена с помощью jQuery AJAX
У вас есть в вашем HTML:
<div id="header"></div>
<div id="myLoadedHTML"></div>
И myLoadedHTML будет заполнен HTML-кодом, полученным с стороннего веб-сайта.
Я рекомендую использовать инструмент, например YQL, чтобы получить HTML. YQL позволит вам создавать сложные запросы для извлечения только необходимых вам фрагментов HTML.
2b. Если сторонний веб-сайт не предоставляет API: embed
Проверьте эту тему: альтернативы iframes с html5
Он читает, что: if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do
В нем также упоминается тег embed:
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
В вашем случае вы могли бы достичь своей цели с помощью чего-то вроде:
<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>
2в. Если сторонний веб-сайт не предоставляет API: iframe
В качестве альтернативы, если вы хотите отобразить сторонний веб-сайт в iframe, а затем изменить отображение с помощью собственного контента, я предлагаю вам проверить этот поток StackOverflow: Невозможно изменить контент iframe, что не так?
В вашем конкретном случае, скажем, вы назвали ваш iframe myIframe:
<iframe src="serveraddress/index.html" id="myIframe"></iframe>
Тогда вы могли бы достичь своей цели примерно следующим образом:
$(document).ready(function(){
$('#myIframe').ready(function(){
$(this).contents().find('body').before('<div id="header"></div>');
});
});