Making external URLS when working with WordPress content


#1

Hello all,
I’ve been reluctant to ask, 'cause I’m a can-do, rather than a can-ask person…

I’ve got an app I’ve been working on, and it’s getting JSON data from a WordPress site and storing it in a cached DB. This is all working fine, but I’ve got a problem when it comes to the links in the WP article.

I’d like them to open in an external system browser.

I show the list of articles in an ionic list like so:

    <ion-item ion-item *ngFor="let item of myAssociativeArr " >
      <ion-row>
        <ion-col col-2>
            <img [src]="item.wp_featured_media_url">
        </ion-col>
        <ion-col col-10  (click)="itemTapped($event, item)">
            <h2 [innerHTML]="item.wp_title"></h2>
            <p [innerHTML]="item.wp_excerpt" ></p>
            <p><b>Published: </b>{{item.wp_date | date: "dd/MM/yyyy" }}</p>
        </ion-col>
      </ion-row> 
    </ion-item>
    <!-- item.wp_link -->
  </ion-list>

From there, the user clicks on the item, and it goes to another page called PostDetail via the itemTapped code/function:

 itemTapped(event, item) {    
     console.log('Showing you the article');
 		this.nav.push(PostDetail, {      
 		  item: item
		});
 }

It is rendered on that PostDetail page with the following:

 <div *ngIf="selectedItem" class="selection">
    <h2 [innerHTML]="selectedItem.wp_title"></h2>
    <p><b>Published: </b>{{selectedItem.wp_date | date: "dd/MM/yyyy" }}</p>
    <div [innerHTML]="selectedItem.wp_content"></div>
 </div>

However, the problem is that in that in the original WP content, it has links already in the article which is fine, but I’d love it if my app opened those links in a native browser, rather than the app’s internal one, so that when it opened in the external browser, when I click back, I’m back in my app - where I left off (if possible).

I can open links to an external browser, with HTML such as :

<a class="item" href="#" onclick="window.open('https://www.test.com/', '_system', 'location=yes'); return false;">Open a Browser</a>

But, because the WP content is already rendered and contains links that are already formed, how am I able to convert links such as

<a href="http://www.test.com/">test.com</a>

to

<a class="item" href="#" onclick="window.open('https://www.test.com/', '_system', 'location=yes'); return false;">test.com</a>

I’ve tried many things, and even added this following JS to my PostDetail page, but it doesn’t seem to want to work either. Any help would be greatly appreciated.

<script>
            window.onclick = function(e) {
                e = e || window.event;
                var element = e.target || e.srcElement;
                var htpattern = /^(http|https):\/\//i;
                if ((element.tagName == 'A') || (element.tagName == 'a')){
                   alert("I am an alert box!");
                    if (htpattern.test(element.href) && !_.startsWith(element.href, "http://localhost")) {
                        window.open(element.href, "_system","location=yes");
                        return false; // prevent default action and stop event propagation
                    }
                }
            };
</script>

Many thanks, Steve


#2

I guess if you just play around long enough, you’ll find a solution…
This code is in a main “scripts.js” file that is common to all pages. It seems to be working.

 window.onclick = function(e) {    
      e = e || window.event;
      var element = e.target || e.srcElement;
      var htpattern = /^(http|https):\/\//i;
      if ((element.tagName == 'A') || (element.tagName == 'a')){
          if (htpattern.test(element.href)) {
              window.open(element.href, "_system","location=yes");
              return false; // prevent default action and stop event propagation
          }
      }
  };