在InAppBrowser中打开链接时维护标题 [英] Maintaining Header when Opening Link in InAppBrowser

问题描述

我使用离子框架开发原生应用程序。在这里，我在所有页面中都有默认标题。当切换到第二页时，我需要在应用程序浏览器中查看外部内容。

因此，我使用了window.open

 < a href =＃onclick =window.open（'https：//google.com','_blank','location=yes'， 'closebuttoncaption = Return'）;>点击此处查看inapp浏览器< / a> 
  

但是，当我在应用内浏览器中查看内容时，我需要头部不变。

离子框架可能吗？
我不需要iframe。它在html中很重。

更新：

我正在注入iframe的html文件。像

 < div id =header>< / div> 
< iframe src =serveraddress / index.html>< / iframe> 
  

代替iframe，还有什么保持头常量？如果我使用应用内浏览器，我的标题是不可见的。

我忽略了您的问题中的应用内浏览器元素。这是一个更新，专门用于应用内浏览器。

免责声明：以下提供的代码均未经过测试;然而，这个答案为您提供了实施解决方案的指导。

取代iframe 标题常量？如果我使用应用内浏览器，我的标题是不可见的。（...）当我查看外部网站内容时，标题需要保持不变。

当您使用应用内浏览器时：

 < a href =＃onclick =窗口。打开（'https：//google.com'，'_blank','location=yes','closebuttoncaption=Return'）;>点击此处查看inapp浏览器< / 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'，...）您可以使用自己的标题显示您的自定义页面。

您可以使用应用内浏览器抓取第三方网页，隐藏它，修改它，然后显示它。

请阅读此Cordova文档页面。

var ref = window.open（url，target，'hidden = yes'）; $ b

• 打开一个窗口并隐藏它：
  

• 在隐藏的应用程序内窗口准备就绪时执行脚本：
  

   
    var iabRef = null; 
  函数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 ）; 
  }）; 
  } 
  函数iabClos​​e（event）{
   iabRef.removeEventListener（'loadstop'，replaceHeaderImage）; 
   iabRef.removeEventListener（'exit'，iabClos​​e）; 
   
   
  函数onDeviceReady（）{
   iabRef = window.open（'http://apache.org'，'_blank'，'location = yes'）; 
   iabRef.addEventListener（'loadstop'，insertMyHeader）; 
   iabRef.addEventListener（'exit'，iabClos​​e）; 
   
   $ / code $ / pre $ 
  现在你可以显示应用程序内窗口：<$ c 
   
   $ hr 
   $ b $ ref $ show b 
   
   
   
   
   
   $ b 
   附录：在您的应用中使用第三方内容的4种技术：        > 
   
   如果第三方网站提供API （复杂的解决方案，但具有可配置性）
   
   
  例如 Bing Search API  
   
   
   
  一些网站提供了一个API，它以纯粹的信息响应，通常以 JSON 字符串的形式返回。
   
   
   
  您可以使用JavaScript模板，例如小胡子，从您获得的JSON响应创建HTML，或者服务器端或客户端。然后你打开你的弹出窗口：
   < div id =header>< / div> 
  < div id =myTemplatedHTML>< / div> 
    
  如果您选择客户端选项，我建议您阅读在html中插入html的开放窗口 
   
   
   
   
   
   
   2a。 如果第三方网站未提供API ：跨网站JavaScript调用
            
   
   
  您必须在您的HTML中：
   < div id =header>< / div> ; 
  < div id =myLoadedHTML>< / div> 
    
  并且myLoadedHTML将充满从第三方网站获取的HTML。
   
   
   
  我推荐使用 YQL 等工具来获取HTML。 YQL将允许您进行复杂的查询以获取所需的HTML数据。 
   
   
   
   
   
   2b。如果第三方网站未提供API ：embed 
   
   
   
  请检查以下主题：替代iframes与html5  
   
   
   
  它读取：如果你想显示跨域HTML内容（使用CSS样式，并与javascript交互）iframe保持作为 
   
   
   
  它还提到了嵌入标签： 
   
   
   < embed src =http://www.somesite.comwidth = 200 height = 200 />< / embed> 
    
  在你的情况中，你可能用类似的方式实现你的目标：
   < div id =header>< / div> 
  < embed src =http://www.somesite.comwidth = 200 height = 200 />< / embed> 
    
   
   
   
   
   
   <2c。如果第三方网站未提供API ：iframe 
   
   
   
  或者，您想要在iframe中显示第三方网站，然后用你自己的内容修改显示，我建议你检查一下这个StackOverflow线程：无法修改iframe的内容，出了什么问题？
   
   
   
  在你的特定情况下，假设你命名了你的iframe  myIframe ：
   < iframe src =serveraddress / index.htmlid =myIframe> < / iframe中> 
    
  然后，您可以通过如下方式实现目标：
    $（document）.ready（function（）{
   $（'＃myIframe'）。ready（function（）{
   $ ）.contents（）。find（'body'）。before（'< div id =header>< / div>）; 
  }）; 
  }）; 
    
   
  I'm using ionic framework to develop native app. Here, I'm having default header in all the pages. When switching over to second page, I need in-app browser to view the external content.
  
  So, I used window.open
   <a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>
  But, I need the header to be constant when I am viewing the content in in-app browser.
  
  Is it possible in ionic framework?
  I don't need iframe for this. It is heavy weighted in html.
  
  Updated:
  
  I m having a html file which I m injecting to iframe. like 
  <div id="header"></div>
  <iframe src="serveraddress/index.html"></iframe> 
  Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.
  解决方案
  EDIT
  
  I had disregarded the in-app browser element in your question. Here is an update, specifically for in-app browser.
  
  DISCLAIMER: none of the code provided below has been tested; however, this answer gives you guidelines to implement your solution.
  
    
  Instead of iframe, is there anything which remains the header constant? If I use in-app browser, my header was invisible.(...)Header needs to be constant when I'm viewing external website content.
  When you use in-app browser:
  <a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>
  it opens a popup which displays the requested URL.
  
  You would like to have your own header displayed in the in-app browser window. I see two ways to do this:
  
  A) You could customise the webpage you want to display in your in-app browser beforehand, and store it on your server.
  
  The customised webpage could have included some third party HTML, using one of the 4 techniques mentioned below. See techniques 1, 2a, 2b and 2c.
  
  Say you store a customised webpage on your server which is like so:
  <div id="header"></div>
  <div id="main"></div>
  The page is stored on your own server, at url: www.myserver.com
  
  If you make your in-call like: window.open('http://www.myserver.com',...) you would display your customised page, with your own headers.
  
  B) You could fetch the third party webpage with in-app browser, keep it hidden, modify it, then display it
  
  Please read this Cordova doc page.
  
  
  To open a window and keep it hidden:
  
  var ref = window.open(url, target,'hidden=yes');
  To execute a script when the hidden in-app window is ready:
  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);
  }
  
  Now you can show the in-app window: ref.show();
  
  
  
  
  APPENDIX: 4 techniques to use third-party content in your apps:
  
  
  
  
  If the third-party website provides an API (complex solution, but entirable configurable)
  e.g. Bing Search API
  
  Some websites provide an API, which responds with bare information, usually returned in the form of a JSON string.
  
  You can use a JavaScript templator like Mustache to create your HTML from the JSON response you got, either server-side or client side. Then you open your popup:
  <div id="header"></div>
  <div id="myTemplatedHTML"></div>
  If you go for the client-side option, I suggest you read open window in javascript with html inserted
  
  
  
  2a. If the third-party website does not provide an API: cross-site javascript call
  
  Please read this thread: Loading cross domain html page with jQuery AJAX
  
  You would have in your HTML:
  <div id="header"></div>
  <div id="myLoadedHTML"></div>
  And the myLoadedHTML would be filled with HTML fetched from the third-party website.
  
  I recommend to use a tool like YQL to fetch the HTML. YQL will let you make complex queries to fetch just the bits of HTML you need.
  
  
  
  2b. If the third-party website does not provide an API: embed
  
  Please check this thread: alternatives to iframes with html5
  
  It reads that: 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
  
  It also mentions the embed tag:
  <embed src="http://www.somesite.com" width=200 height=200 /></embed>
  In your case, you could probably achieve your goal with something like:
  <div id="header"></div>
  <embed src="http://www.somesite.com" width=200 height=200 /></embed>
  
  
  
  
  2c. If the third-party website does not provide an API: iframe
  
  Alternatively, should you want to display a third-party website in an iframe, and then modify the display with your own content, I suggest you check this StackOverflow thread: Cannot modify content of iframe, what is wrong?
  
  In your particular case, say you named your iframe myIframe:
  <iframe src="serveraddress/index.html" id="myIframe"></iframe>
  You could then achieve your goal with something like this:
  $(document).ready(function(){
      $('#myIframe').ready(function(){
          $(this).contents().find('body').before('<div id="header"></div>');
      });
  });​
  
  
                          
  这篇关于在InAppBrowser中打开链接时维护标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！