javascript - FancyBox displaying contents of a DIV as type iFrame

This works perfectly fine:

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : '','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script>

That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"

and have the page coded this way:

 <body>

    <div id="pg"></div>

    <script type="text/javascript">
     document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \".dtd\"><html xmlns=\"\"><head><title></title></head><body>test me now</body></html>";
    </script>
</body>

FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)

Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)

TIA

UPDATE: 07/28/12

As @arttronics suggested, I put together a jsFiddle

To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)

I assume that I need to display content using FancyBox's iframe player, but I could be wrong.

The jsFiddle shows:

The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.

However, when the player is an iframe and the content es from href, then the FancyBox container is empty. If the contents es from the content attribute, FancyBox shows a 404 error.

Simply ment and unment the jsFiddle code to see what I mean.

Any ideas for how I can meet my objective are appreciated and will get an up vote!

TIA.

Update: 07/31/2012

This new jsFiddle example: Iframe report viewer works but not in FancyBox

As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.

I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".

Any suggestions? Or do you see a way to fix the jsFiddle example?

This works perfectly fine:

<script type="text/javascript">
   $(document).ready(function() { 
       $.fancybox({'href' : 'http://www.cnn.','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
   });
</script>

That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"

and have the page coded this way:

 <body>

    <div id="pg"></div>

    <script type="text/javascript">
     document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
    </script>
</body>

FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)

TIA

UPDATE: 07/28/12

As @arttronics suggested, I put together a jsFiddle

I assume that I need to display content using FancyBox's iframe player, but I could be wrong.

The jsFiddle shows:

The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.

However, when the player is an iframe and the content es from href, then the FancyBox container is empty. If the contents es from the content attribute, FancyBox shows a 404 error.

Simply ment and unment the jsFiddle code to see what I mean.

Any ideas for how I can meet my objective are appreciated and will get an up vote!

TIA.

Update: 07/31/2012

This new jsFiddle example: Iframe report viewer works but not in FancyBox

As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.

Any suggestions? Or do you see a way to fix the jsFiddle example?

Share Improve this question edited Jul 31, 2012 at 14:15 asked Jul 26, 2012 at 22:27 Karl 1,8641 gold badge25 silver badges40 bronze badges

1 Try using FancyBox HTML inline player and not iframe player. – arttronics Commented Jul 27, 2012 at 0:01
@arttronics I think that will work. I have to do more testing tomorrow. In the mean time, an up vote for you. Thanks. – Karl Commented Jul 27, 2012 at 0:34
Unfortunately, type inline does not allow me to replicate the behavior of the iframe type. With an iframe, I can have a button on the page being displayed in FancyBox which onclick() handler is coded like this window.print() and the viewer can have a nice print out of the FancyBox content. Even if my inline content appears to be a plete HTML document, the DOM does not see it as a document so the print() method prints the content of the main window. (I know I can print the content of a FancyBox by opening a new window, but I want to avoid that if possible.) – Karl Commented Jul 27, 2012 at 9:54
Notice that while this code opens FancyBox and the content is displayed, the call to window.print(); does not work: $.fancybox({'content':'<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3/1999/xhtml\"><head><title>Print Me</title></head><body><h1>Print Me</h1><button onlick="window.print();">Print</button></body></html>', 'Width':500,'Height':500, 'hideOnContentClick': false, 'type':'inline' }); – Karl Commented Jul 27, 2012 at 10:39
1 @arttronics please see jsfiddle/taa1953/P823J. Note that only part of the contents of the FancyBox prints. And if you unment the type attribute, the content of the div no longer appears in the FancyBox. – Karl Commented Jul 27, 2012 at 16:34

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 5 +100

Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?

If you want to print content of the fancyBox, then you can add print button - http://jsfiddle/s3jRA/

Updated demo - http://jsfiddle/qVrLr/ - for creating and updating contents of iframe

As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.

See this working example: jsFiddle

This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).

Major Caveats

I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.

One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an @media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - FancyBox displaying contents of a DIV as type iFrame - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)