Welcome to the MacNN Forums.

Diggory Laycock · Feb 7, 2006, 03:52 PM

Hello there, I was wondering if anyone could help me with a very simple problem, that I can't quite get to work:

I have a simple dashboard widget that contains an iFrame - the URI of the source of the iFrame will change depending on what the user puts in a text-box.

However, I can't get the iFrame to load at all...

The HTML looks like this:

Code:
<html>

<head>

<!-- The style sheet should be kept in a separate file; it contains the design for the widget -->
<style type="text/css">
	@import "BlankWidget.css";
</style>

<!-- The JavaScript file contains the logic needed for this widget -->
<script type='text/javascript' src='BlankWidget.js' charset='utf-8'/>

</head>

<body onload='setup();'>

	<!-- the widget background -->
	<img src="Default.png">  		

	<div id="frameDiv">
		<iframe id="cardFrame" name="cardFrame" src="" scrolling="no" frameBorder="0" height="100" width="100"></iframe>
	</div>

</body>

</html>

and the JS looks like this

Code:
function setup()
{
	var theFrame = document.getElementById("cardFrame")
	theFrame.src = "http://news.bbc.co.uk";	

	return 0;
}

However, the frame never loads - it just stays empty - is there something else I need to do? specifically tell the iframe to reload or something?

Thanks in advance.

Chris O'Brien · Feb 7, 2006, 04:54 PM

Make sure you have

Code:
<key>AllowNetworkAccess</key>
<true />

set in your Info.plist. Also, I'm not sure why you're doing the return 0, but it shouldn't make too much of a difference

Diggory Laycock · Feb 7, 2006, 04:59 PM

Ah-ha!

Thanks very much - so simple.... Thanks very much.

Diggory Laycock · Feb 8, 2006, 05:19 PM

Hmm - It's working properly now - but I've got one major issue, and I was wondering if anyone had any ideas:

The iFrame is loaded from the internet - and has anchors/links in it.

I see from my Googling (and experimentation) that HTML anchors in Widgets will load the new page within the widget, not pass it off to the preferred browser. I thought I could use JavaScript to replace all the anchors within the iFrame so that instead of normal hrefs they use the widget.openURL('url') method to open the links within the proper browser.

Alas - after some experimentation I see that WebKit doesn't allow access to the iFrame's contentDocument (the sub-page that the iFrame loads) if the iFrame is a remote page (it does if the page is local to the original page.)

So - does anyone have any ideas how to re-direct the links to the browser, rather than replacing the existing content of the iFrame?

(I tried setting a <base target="_blank"> tag to the HTML header of the widget, but it didn't seem to make any difference.)

Thanks in advance for any help.

Digs.

Chris O'Brien · Feb 9, 2006, 02:53 PM

One way could be to pull in the page using XMLHttpRequest and saving the responseText to a local file, the setting the source of the iframe to that. Otherwise it can get messy setting the innerHTML of a div and making sure nothing conflicts with the rest of your page.

Diggory Laycock · Feb 9, 2006, 03:36 PM

Hmm - Thanks for the help, however - it turns out that XMLHTTPRequest only allows loading of urls from the same domain as the original page - for security reasons.

I may not be able to do what I want - I think I'll just stop the user from being able to click the links in the iFrame - which is a shame, but looks like the least troublesome route.

Thanks again for your help.

Diggory Laycock · Feb 9, 2006, 03:38 PM

Hmm - maybe I can use the widget JS method widget.system() together with CURL to pull the page, then squirt the source in that way....

Chris O'Brien · Feb 10, 2006, 10:33 AM

XMLHttpRequest works fine for what you want to do from the Dashboard environment. You could use curl of course - in fact, it'd probably be nicer for what you want to do as it would just be one step (getting it and saving it to a file) rather than getting it via XMLHttpRequest and then echo'ing it to a file (since you also have to escape certain characters etc).

But the main point is that the security restrictions of XMLHttpRequest found in browsers like Firefox does not apply in the Dashboard.

Diggory Laycock · Feb 10, 2006, 11:26 AM

Hmm - Curl worked, but it was a case of one-step forward, two-steps back, as a couple of the images in the page were referenced relative to the page - so they didn't load properly - also I didn't seem to be able to get at the inserted HTML via the DOM, so I couldn't re-write the anchors in the 'injected' HTML.

Never mind - I think I'll just stop people from being able to click the links by placing a transparent layer over the top of the injected HTML - so the links aren't clickable.