Dynamo

JDW

24 Jun 2015, 3:08 am

FileMaker IWP Web Viewer, Links & jQuery

I am testing a FileMaker database using IWP (Instant Web Publishing). Filemaker can open web pages or other external web content in what they call a “Web Viewer,” which is just an iFrame. I created a Web Viewer (iFrame) on a particular FileMaker layout that links to a directory listing on my server (.htaccess is set to allow access via authentication). So when I open the database in-browser and navigate to the layout which has the Web Viewer, the directory listing displays as expected. In that listing I have PDFs. If I click the PDFs they download and display within the Web Viewer iFrame. PDFs are automatically contained within EMBED tags.

Everything works well enough on desktop browsers, but on the iPhone and iPad, the PDFs don’t display large enough. I’ve enlarged the Web Viewer (iFrame) size tremendously, but at some point iOS locks down the size of the displayed PDF. It displays too small on both the iPad and iPhone.

To fix this, I want to make the links to the PDFs open in a new tab/window. Since I don’t know how to make that happen by editing the .htaccess file on my server, I assume it must be done by JS or jQuery. I’ve tried jQuery, and although my code does not generate any errors, clicking the PDF links doesn’t open them in a new window/tab on any platform.

Here is the View Viewer code inside Filemaker, and note the start and finish quotes are required, which means any quotes I used inside must be single quotes only:

"data:text/html,
    <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
 <body style='border=0;margin=0;overflow:hidden'>
    <div>
    <object type='text/html' data='http://www.kiramek.com/serial-db/' width='100%' height='100%' style='overflow:hidden;border:none'></object>
</div>
</body>
    <script>
    (function() {
    ('a[href$=.pdf]').click(function() {
    window.open(this.href);
    }); 
    });
    </script>"

And here is a screenshot of the page code when I have a PDF open/displayed:

http://cl.ly/image/2C0l3o1E3Y0i/Image%202015-06-24%20at%2012.04.26%20PM.png

I would appreciate hearing your thoughts and suggestions.

Thanks,

James Wages