banner
李大仁博客

李大仁博客

天地虽大,但有一念向善,心存良知,虽凡夫俗子,皆可为圣贤。

Different ways to open a new page for WordPress page navigation using JS

Recently, CG's Japanese language training course has started, and because there are a lot of coursework to complete every day, there haven't been many updates recently. Please forgive me, everyone. Yesterday, I solved a small problem for a friend, and CG felt that the method of solving the problem was very simple and practical. You may also encounter it frequently, so I'm sharing it with everyone here. The problem is as follows: in the navigation bar of the homepage automatically generated by the WordPress blog system, the links for navigating multiple pages can be opened in different ways, such as the current page and a new page. Friends who know HTML may use target="_self" and target="_blank" to solve this, but after reading the automatically generated code in the WP theme, CG found that it was a complicated task to solve it. Because in this theme, if only HTML is used to implement the automatic navigation bar in PHP, there is only one way, so that solution is rejected. HTML is not enough, so we have to turn to JS for help. We can add JS code to the page content to achieve a pop-up window, and then return to the parent page. If it is a newly opened page, it will also include pop-up JS code, resulting in recursion. To solve this, we can set a window name for verification.

Here is the JavaScript code:

var pageName = "demo";   // Window name
if (window.parent.name != pageName) {
   window.open(document.location, pageName);    // Pop-up window
   window.history.back();    // Go back to the previous page
}

Note: The JS pop-up window method may be blocked by the toolbar or IE itself in versions above IE6. Therefore, if it is a simple text page, you can change it to showModelDialog to achieve it. If you often log in to Taobao, you will find that Taobao uses showModelDialog. First, check if it can be popped up, and if not allowed, switch to another method.

Here is the JavaScript code:

var pageName = "demo";   // Window name
if (window.parent.name != pageName) {
   window.showModelDialog(document.location, pageName);    // Pop-up window
   window.history.back();    // Go back to the previous page
}

A simple explanation of the JS code: Define a variable pageName to save the unique identifier of the page, then there is a condition to eliminate recursion, followed by the pop-up window, and finally, of course, go back, haha.

The usage is a bit cumbersome, as you need to add JS scripts separately for each page. You can use HTML source code editing when editing the page, then choose a unique name for your page, modify pageName, and finally add it to the top of your page.

If you want to implement forced pop-ups, you can consider using Flash, which is very rogue and domineering. It is not difficult to implement. CG will share the method with everyone soon. Stay tuned!

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.