Intra-page links should not open in a new tab/window

In #405 we made links open in new browser tabs/windows rather than navigating the diff view. That was a good improvement, but it also happens when clicking intra-page links, like the “Proposed Changes - A Holistic Approach to Closure Part B” link here:

https://monitoring.envirodatagov.org/page/c7a491b7-b296-4bdf-965e-372a87a7ac05/6f12e08a-a7f7-4ed1-8775-8c3791614fba..1fdefab4-bf6e-4829-892a-32c35466ae3d

That link should really just scroll down the page.

To fix this, we probably just need to check whether the href starts with # before adding target="_blank" to a link here:

web-monitoring-ui/src/scripts/html-transforms.js

Lines 51 to 68 in 3ed21c2

     /**  
    * Prevents navigation from within a diff by forcing links to open in a new  
    * tab when clicked. This helps ensure we don’t get in a state where one side  
    * of a side-by-side diff has been navigated and viewer does not realize they  
    * are no longer actually looking at a *diff*.  
    *  
    * NOTE: This requires the iframe displaying the diff to allow popups with the  
    * `sandbox="allow-popups"` attribute.  
    * @param {HTMLDocument} document The html document to transform.  
    * @returns {HTMLDocument}  
    */  
   export function addTargetBlank (document) {  
   // Add target="_blank" to all <a>tags  
   document.querySelectorAll('a').forEach(node => {  
   node.setAttribute('target', '_blank');  
   });  
   return document;  
   }  
 

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Intra-page links should not open in a new tab/window #494

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/**
	* Prevents navigation from within a diff by forcing links to open in a new
	* tab when clicked. This helps ensure we don’t get in a state where one side
	* of a side-by-side diff has been navigated and viewer does not realize they
	* are no longer actually looking at a diff.
	*
	* NOTE: This requires the iframe displaying the diff to allow popups with the
	* `sandbox="allow-popups"` attribute.
	* @param {HTMLDocument} document The html document to transform.
	* @returns {HTMLDocument}
	*/
	export function addTargetBlank (document) {
	// Add target="_blank" to all <a>tags
	document.querySelectorAll('a').forEach(node => {
	node.setAttribute('target', '_blank');
	});
	return document;
	}

Uh oh!

Intra-page links should not open in a new tab/window #494

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions