document.write() in a Fancybox 1 window

Question

Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:

$(document).ready(function() {
  $(".href").click(function() {
    $.fancybox.open({
      href : $(this).attr("data-id"),
      type : 'iframe'
    });
  });
});

This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:

<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content 
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>

The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:

<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>

The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:

<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>

What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.

Is it an option to upgrade fancybox? I tried with Version 2.1.3 and it looks ok. — Flakes, Jan 31 '16 at 12:31
How did you do it? I downloaded the 2.1.5, modified the iframe.html of the 'Open single gallery item, custom options' demo. Then if I put the either to the head or body, the textual 'random_text' still appears. http://img.ctrlv.in/img/16/01/31/56ae1ad112333.jpg — Nick, Jan 31 '16 at 14:34

score 0 · Answer 1 · edited May 23 '17 at 12:23

This is how I tested:

main page:

<html>
<head>
<title></title>
<meta name="" content="">
    <link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
  $(".fancybox").fancybox();
  $(".href").click(function() {
    $.fancybox.open({
      href : $(this).attr("data-id"),
      type : 'iframe'
    });
  });
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>

and the page being opened in fancybox: fancy.php

<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>

[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]

Sorry for the late reply and thanks for the help, I tried your code but if I highlight the "random_textSome other content to show on fancybox" on the fancybox layer, then open the source, the 'random_text is still there: random_textSome other content to show on fancybox. Nonetheless I'll approach this from some other ways, thanks again. — Nick, Feb 19 '16 at 11:44

document.write() in a Fancybox 1 window

1 Answers1