Как открыть все ссылки с внешней страницы с помощью InAppBrowser?

Question

Я искал веб-сайт, youtube и сообщества, но не решил этого вопроса. У меня есть приложение, которое я разрабатываю с помощью Phonegap Build. Я включил плагин InAppBrowser в свой файл config.xml и отлично работает со ссылками в приложении. Решение или направление, которое я ищу, - это способ включения ссылок, которые находятся на внешнем веб-сайте, чтобы открыть его с помощью InAppBrowser. Ссылки на внешней странице динамические, но я могу добавить событие onClick. Вот как выглядит моя динамическая ссылка.

<a href="#" onclick="openInAppBrowserBlank(\'' . get_permalink($post->ID) . '\');>Read More</a> 

Это одна из ссылок, которую я вижу, когда я использую Firebug для просмотра html, который он генерирует.

<a onclick="openInAppBrowserBlank('http://website.com/uncategorized/post-one/');" href="#">Read More »</a> 

Это сценарий, который я использую для загрузки внешней страницы в своем приложении.

<script type="text/javascript"> 
function expage() { 
    $("#display").html('<object data="http://website.com" style="position: relative; right:0; top:30px; width:100%; height:100%; overflow:auto; overflow-y:hidden; padding:0px;" />'); 
} 
</script> 

Это DIV, который отображает внешнюю страницу.

<div id="display" class="card1" style="position:fixed; top:15px; left:0px; width:100%; height:93%;"></div> 

Это скрипты, прикрепленные к моей странице. Phonegap создает «phonegap.js» в мое приложение.

<script type="text/javascript" src="phonegap.js"></script> 
<script type="text/javascript" src="js/index2.js"></script> 
<script type="text/javascript"> 
    app.initialize(); 
</script> 

Это "index2.js"

var ref = null; 
function openInAppBrowserBlank(url) 
{ 
    try { 
ref = window.open(url,'_blank','location=no'); //encode is needed if you want to send a variable with your link if not you can use ref = window.open(url,'_blank','location=no'); 
    ref.addEventListener('loadstop', LoadStop); 
    ref.addEventListener('exit', Close); 
} 
catch (err)  
{ 
    alert(err); 
    } 
} 
function LoadStop(event) { 
    if(event.url == "http://website.com/x.php"){ 
     // alert("fun load stop runs"); 
     ref.close(); 
    }  
} 
function Close(event) { 
    ref.removeEventListener('loadstop', LoadStop); 
    ref.removeEventListener('exit', Close); 
} 

Кто-нибудь делал что-то подобное или может дать мне направление?

Answer 1

Я думаю, проблема в том, что вы загружаете внешнюю страницу с помощью тега объекта. У этого есть другой контекст просмотра, чем ваша текущая страница, поэтому ваша функция openInAppBrowserBlank и другие скрипты там не существуют.

Это определение тега объекта

HTML, встроенный объект Элемент() представляет собой внешний ресурс, который можно рассматривать как изображение, вложенного контекст просмотра, или ресурс, чтобы быть обрабатывается плагином.

Прочитано here о контексте просмотра. Другой контекст просмотра используется также для фреймов и фреймов внутри набора фреймов.

Так что самым простым решением является использование IFRAME с бесшовной атрибутом как этот

<iframe seamless="seamless"> 

Этот логический атрибут указывает, что браузер должен отображать встроенную рамку таким образом, что делает его, кажется, часть содержащего документ, например, применяя стили CSS, которые применяются к содержащемуся документу перед стилями, указанными в этом документе, и открывая ссылки в содержащихся документах в контексте родительского просмотра (если только этот параметр не предотвращает это).

Таким образом, контекст просмотра страницы внутри iframe будет таким же, как на вашей странице, и ваш сценарий, скорее всего, будет работать.

Я использую «скорее всего» специально, потому что вам нужно помнить, что вложенная страница была спроектирована, предполагая, что она будет выполняться в его собственном контексте просмотра, и вы будете запускать ее на другом, так что неожиданное поведение может возникнуть.

Есть и другие решения, такие как вызов ajax и заполнение содержимого любого тега, например, div контейнера с полученным контентом или использование iframe с неограниченным атрибутом для загрузки страницы и вставки вашего скрипта в нее, но это более сложными и будут иметь побочные эффекты, так что будьте в курсе.

Во всех решениях у вас могут возникать сталкивающиеся стили или скрипты, поэтому, если это так, используйте без IFRAME iframe и вводите только нужные функции.

{Edit}

Выполнение некоторых исследований я нашел статью, и некоторые SO после containig примеры того, как вводить скрипты фреймов. Эти ссылки

http://jaspreetchahal.org/how-to-inject-javascript-into-an-iframe/

inject a javascript function into an Iframe

Injecting Javascript to Iframe

Эти примеры работают очень хорошо, когда IFrame ссылается на страницу, которая не имеет CORS ограничений, то есть, запрос от другого домен. Если это так, вы должны использовать window.postMessage для связи между вашей страницей и внешней страницей внутри iframe, потому что api дает очень ограниченный доступ к объектам окна и местоположения (представьте себе угрозы безопасности там).

Отметьте mozilla docs в разделе Доступ к API-интерфейсу Cross-origin, чтобы увидеть, какая функциональность оставлена ​​для вас.

Answer 2

Я узнал, что проблема «политики происхождения доступа» является проблемой. Так как страница, которую я загружаю, не является родной и размещена на сервере, нельзя вставить сценарий плагина «inappbrower». Независимо от того, использую метод getElementById. Я читал, что вокруг этого нет, но, к сожалению, пока это не доступно.

Я смог создать другое решение, загрузив данные через массив и стилизуя элементы. Я сделал это, разместив JS с массивами на моем сервере и добавив метод «onclick = inappbrowserblank» к ссылкам.

Это работало как шарм, но, к сожалению, сейчас это ручной процесс.

Надеюсь, это поможет кому-то.