Iframe Link

Posted by ErichSteinboeck on 29 Mar 2009 20:31, last edited by GoVegan on 09 May 2010 05:49

Tags: javascript link links rtsp scheme uri url

rating: +2+x

Although Wikidot supports quite a list of URL schemes for links — http://, https://, ftp://, gopher://, news://, mailto:, and mms:// — there may be situations where you'd like to code a link that uses another scheme, unsupported by the standard Wikidot syntax.

Here is a way how to create links using other than the above schemes.

Note: for an alternative quick, one-shot only solution, see section Alternative Solution

Step by Step

Step 1

Create a page inc:iframe-link with the following code.

Note:

  • Replace community (second line of code) with the name of your Wiki
  • Otherwise copy/paste the code exactly as-is, don't remove or change anything
[[embed]]
<iframe src="http://community.wdfiles.com/local--code/include:iframe-link/1#{$url}#{$text}#{$prepend}#{$append}"
frameborder="0" scrolling="no" width="99%" height="18px">
</iframe>
[[/embed]]
[!--
[[code type="html"]]
<html>
 <head><title>Iframe Link</title>
  <style type="text/css">
   @import url("http://www.wikidot.com/common--theme/base/css/style.css");
  </style>
 </head>
 <body>
  <script type="text/javascript">
 
   // (…#) url # text # prepend # append (#…)
   var params = /^[^#]*#([^#]*)#?([^#]*)#?([^#]*)#?([^#]*)#?.*$/;
 
   var match = params.exec(unescape(window.location.href)); // #'s may be escaped
   if (match) {
    var url = match[1];
    var text = url;
    var prepend = '';
    var append = '';
 
    var target = '_parent';
    if (url.charAt(0) == '*') {
     url = url.substr(1);
     target = '_blank';
    }
 
    if (match[2] && match[2] != '{$text}')
     text = match[2];
    if (match[3] && match[3] != '{$prepend}')
     prepend = match[3] + ' ';
    if (match[4] && match[4] != '{$append}')
     append = ' ' + match[4];
 
    document.write(prepend + '<a href="' + url +'" target="' + target + '">' + text + '</a>' + append);
   }
  else
      document.write('<i>(No link specified)</i>');
  </script>
  <noscript>
   <i>(Link not available)</i>
  </noscript>
 </body>
</html>
[[/code]]
--]

Step 2

Use the following code on your page where you want to code the link.

[[include inc:iframe-link url=url <| text=link-text> <| prepend=trailing-text> <| append=leading-text> ]]


where
  • @@@...@@@ denote optional parameters
  • url is any URL with a scheme not supported by native Wikidot syntax
  • link-text is an optional arbitrary string to be displayed as a link text. If link-text isn't specified, the URL will be used as the link text
  • leading-text is an optional text that should be shown immediately in front of the link. It may include HTML (no Wikidot) tags, e. g. “<em>Click</em>”.
  • trailing-text is an optional text that should be shown immediately after the link. As above it may include HTML tags.

Examples

What you type … What you get …

[[include inc:iframe-link url=rtsp://webtv.wien.gv.at/wienat/ma51/rm/sommerrodelbahn-150k.rm | text=Toboggan run | append=in Vienna]]

Alternative Solution

If you need a less complex, or a one-shot solution, or your browser does not support this due to a JavaScript issue, you may use this alternative solution.

Add the following code to your page for each link that you need.

Note:

  • Replace wiki-name with the name of your Wiki
  • Replace page-name with the name of the page you are putting this code on
  • Replace nr-of-code-block with the number of the code block. If it's the first code block on the page, replace it with “1”, if it's the second block, replace it with “2”, and so on
  • Replace url with the URL including the scheme not supported by native Wikidot syntax

[[iframe http://wiki-name.wikidot.com/page-name/code/nr-of-code-block frameborder="0" scrolling="no" width="99%" height="18px"]]
[!--
[[code type="html"]]
<html>
<head><title>Iframe Link</title>
<style type="text/css">
@import url("http://www.wikidot.com/common--theme/base/css/style.css");
</style>
</head>
<body>
@a href="@@//url//@@" target="_parent">Toboggan run</a@
</body>
</html>
[[/code]]
--]

Limitations

Local file:// links do not work

For reasons probably having to do with cross-site scripting restrictions, local links with scheme file:// do nothing if clicked.

Please post here if you know the exact reason or a workaround.

Browser support

The JavaScript-based solution described here may not be supported by all browsers. To support browsers without JavaScript (e. g. Lynx) or browsers with deactivated JavaScript, please see the alternative solution.

Although this JavaScript-based solution tries to degrade as gracefully as possible if a browser doesn't support or has disabled JavaScript, the best it can do is display “(Link not available)” instead of displaying the actual link.

Please post your browser name and version if you are successfully using it or if you find that it doesn't work.

Browsers successfully tested: Firefox 2 & 3, Google Chrome, Internet Explorer 6 & 7, Opera 9.6, Safari 3 & 4
Browsers that do not work: None reported yet

Backlinks

Author

ErichSteinboeckErichSteinboeck. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.