Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hello,

 

I know this question is outside PHP but I could not find answers with my brief research - I will withdraw this if necessary :wub:

 

My site has an iFrame that would display banner ads from third parties. Those banner ads will open EITHER in a new window OR in the parent window (parent window = the window holding the iFrame), depending on the banner files - the URL and link target are embedded in the Flash banners.

 

My sample page with iFrame:

http://www.cofatsui.com/h5/00-h5banner1x1.php

 

I wonder what the JavaScript code would be like that would force all banner links to open in *only* the parent window, for consistence sake. (Opening in *only* a named new window is also okay, as long as the target is consistent for all banners.) I know PHP cannot do this.

 

I do not know JavaScript coding so any help, or any direction to other JavaScript forums, would be appreciated.

 

Thanks!

 

Cofa

 

 

Link to comment
Share on other sites

There is a JS board on this forum that you can use if you want.

Anyway, I would like to help, but I'm having a lot of trouble understanding what you want (and the link you provided doesn't seem to work).

 

Please provide a more clear description of the problem (and hopefully some code too), and maybe we can help.

Thanks.

Link to comment
Share on other sites

Thank you HartleySan, for offering to help!

 

The link is working well on browsers on my computers - but I do notice that sometimes I need to use refresh in order to load the page.  I don't know if this is my browser's problem or problem of the file.

 

For the purposes of this topic, I have provided the file in both php and txt below for your review, from these links:

http://www.cofatsui.com/h5/00-h5banner1x1.php

http://www.cofatsui.com/h5/00-h5banner1x1.txt

 

Below will explain what I wanted to achieve:

 

a. The page from the above link will open some banner ads from third parties, one ad at a time. The banner ads are served by a URL in an iFrame embedded in the above page (we say that this page is in the "parent window").

 

b. Clicking on the ad image will open the ad's target website, EITHER in a new window, OR in the parent window, depending on the target settings of the individual banners.

 

c. For the sake of consistence, I want the target website of all the banner ads to open in the parent window only, irrelevant to the target settings of individual banners. In other word, even if a banner has a target setting to open its target website in a new window, the proposed JavaScript will still open the target website in the parent window where the iFrame is held - hence I use the word FORCE here.

 

Is such JavaScript possible? And how?

 

Thanks...

Link to comment
Share on other sites

Hello HartleySan,

 

Thanks for the stackoverflow link - I found that link and tried that before, but it didn't work...

 

The banners are all stored in the same folder where the file of the parent page and the file in the iFrame are stored as well, as you can see from this:

 

www.cofatsui.com/h5/00-h5banner2.php

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
/** NO STYLE RULE DEFINED HERE **/
</style>

</head>
<body style="margin:0; padding:0; background-color:transparent;">
<?php
$input = array("03", "10", "00", "09");
$rand_keys = array_rand($input, 2);
$testadid = $input[$rand_keys[1]];
?>
<iframe style="width:300px; height:250px; background-color:transparent;" name=inline src="http://www.cofatsui.com/h5/testa<?php echo $testadid; ?>/testa<?php echo $testadid; ?>.html" frameBorder=0 scrolling=no allowtransparency="true">
</iframe>
</body>
</html>

As you can see from the above, one banner is being selected randomly and served from the iFrame.

 

The following is a link of the "00" banner - The banner will still open the target page in a NEW window, even though I have put the <base target="_parent"> in the file:

 

http://www.cofatsui.com/h5/testa00/testa00.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<base target="_parent">
<meta charset="utf-8">
<title>HOMES marketing html5 banners html5 css3 html5 banner ads real estate listing services</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="HOMES marketing html5 banners html5 css3 html5 banner ads real estate listing services">
<meta name="Description" content="HOMES marketing html5 banners html5 css3 html5 banner ads real estate listing services">
<style>
/** NO STYLE RULE DEFINED HERE **/
</style>
</head>
<body style="margin:0; padding:0; background:0;">
<canvas id="testa00" onclick="this.focus();" oncontextmenu="return false;" width=300 height=250 style="outline: none">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="250" id="testa00">
<param name="movie" value="testa00.swf" />
<param name="quality" value="high" />
<param name=allowscriptaccess VALUE="always">
<!--[if !IE]>-->
<object data="testa00.swf" 
	type="application/x-shockwave-flash" width="300" height="250">

	<param name=allowscriptaccess VALUE="always">
	<param name="quality" value="high" />
<!--<![endif]-->
	<a href="http://www.adobe.com/go/getflash">
		<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
	</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</canvas>
<script type="text/javascript" 
	src="testa00.js">
</script>
</body>
</html>

The following is from the "09" banner - The banner itself was set to open in the PARENT window. And as you can see, even when I put the <base target="_blank"> in the file, it will still open the target page in the PARENT window:

 

http://www.cofatsui.com/h5/testa09/testa09.html

<!-- saved from url=(0013)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_blank">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>fs_aux</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<script type="text/javascript"> 
var tweenui_cid = "c5a17c7d-55f7-4f29-bfa1-e9e506da71af"; 
var tweenui_pid = "5234ffa3-dfbd-4270-b161-83342b8d7e3a"; 
var tweenui_width = 300; 
var tweenui_height = 250; 
</script> 
<noscript>Activate javascript to view TweenUI <a href="http://tweenui.com">mobile banner creator</a> content.</noscript> 
<script type="text/javascript" src="http://display.tweenui.com/show.js"></script>
</body>
</html>

I might have missed something that I don't know. Thanks.

Link to comment
Share on other sites

Hi HartleySan,

 

It is because I plan to go with the new trend of using html5 banners on my site, which will ultimately avoid using Flash or other forms of media for the banner ads.

 

With h5 banners, one of the vision I see is that at some point advertisers will be able to modify the contents of their banners from a web-based interface any time they need (just like today's modifying an html ad page via form submission).

 

Since we will take h5 banners from third parties, I think that it would be nice to have a control to force how a target webpage would open - I still wonder if this can be achieved and how.

 

Thanks!

Link to comment
Share on other sites

I'm pretty sure that the SO link I provided is what you're looking for. Here's a simple demo I whipped together:

 

a.html

<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta charset="UTF-8">
    
    <title>iframe demo</title>
    
  </head>
  
  <body>
    
    <iframe src="b.html"></iframe>
    
    <iframe src="c.html"></iframe>
    
  </body>
  
</html>
 
b.html
<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta charset="UTF-8">
    
    <title>Page loaded in iframe</title>
    
  </head>
  
  <body>
    
    <a href="http://www.google.com" target="_parent">Google (this window)</a>
    
  </body>
  
</html>
 
c.html
<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta charset="UTF-8">
    
    <title>Page loaded in iframe</title>
    
  </head>
  
  <body>
    
    <a href="http://www.google.com" target="_blank">Google (new window)</a>
    
  </body>
  
</html>
 
Is that not what you are asking?
  • Upvote 1
Link to comment
Share on other sites

Thanks HartleySan, but no that's not what I am looking for.

 

The part in your example b.html:

   [A TAG]Google (this window)[A TAG END]

or the code between the BODY tags, is that I have no control of if the banner file is from a third party (same for your "c.html").

 

If you refer back to message #5, code for the URL "/testa09.html"

you'll see that the contents between the BODY tags are the code that will deliver the h5 banner or Flash banner, which also controls how the target link will be opened.

 

In other word, if you replace the code [A TAG]Google (new window)[A TAG END] in your file c.html with the following code (seen in my code in message #5):

 



<script type="text/javascript">
var tweenui_cid = "c5a17c7d-55f7-4f29-bfa1-e9e506da71af";
var tweenui_pid = "5234ffa3-dfbd-4270-b161-83342b8d7e3a";
var tweenui_width = 300;
var tweenui_height = 250;
</script>
<noscript>Activate javascript to view TweenUI <a href="http://tweenui.com">mobile banner creator</a> content.</noscript>
<script type="text/javascript" src="http://display.tweenui.com/show.js"></script>


you'll have no control how the target link in the banner would open.

 

See samples modified from your files:

PAGE HOLDING THE IFRAME:


BANNER FILE ON ITS OWN:


 

And what I am looking for is a JavaScript (if this is possible) that could force the banner in the iFrame to open in a specific window that the JavaScript dictates.

 

Thanks.

Link to comment
Share on other sites

You can grab the contents of an iframe using JavaScript.

Here's a jQuery example of how to do that:

http://stackoverflow.com/questions/16103407/get-html-inside-iframe-using-jquery

 

Once you have the contents of the iframe, you can modify them however you please and put the new, modified markup back in the iframe.

 

If the third-party banners are blocked via CORS requests, then you can use something like cURL to get the original banner code, and then modify it as need be before placing it within the iframe.

 

Again, you have a lot of options.

Link to comment
Share on other sites

Thanks HartleySan,

 

I am sorry but I am not sure if the "grab the contents of an iframe" approach could achieve my goal - My thinking is that in the case of a Flash banner or an H5 banner, there is a JS file built-in and it is this JS file that would control the opening of the target window, not the contents of the iframe.

 

Contents of the iframe:

<iframe style="width:300px; height:250px; background-color:transparent;" name=inline src="/h5/testa09/testa-c.html" frameBorder=0 scrolling=no allowtransparency="true">

Contents of the H5 banner "/testa-c.html" in the above iframe:

<script type="text/javascript"> 
var tweenui_cid = "c5a17c7d-55f7-4f29-bfa1-e9e506da71af"; 
var tweenui_pid = "5234ffa3-dfbd-4270-b161-83342b8d7e3a"; 
var tweenui_width = 300; 
var tweenui_height = 250; 
</script> 
<noscript>Activate javascript to view TweenUI <a href="http://tweenui.com">mobile banner creator</a> content.</noscript> 
<script type="text/javascript" src="http://display.tweenui.com/show.js"></script>

As a matter of fact, we can code however we could the iframe contents, but we have no control of the banner file submitted by third party (e.g., the "/show.js" file in the banner).

 

I believe we need to have a client-side script that could override the setting of the JS ("/show.js") in the banner, if that is really achieveable.

 

Thanks.

Link to comment
Share on other sites

Cofa, I'm still having a heck of a time trying to understand what you're saying, but if JS is being used to load a banner into an iframe, after that JS executes, there will be some sort of DOM within the iframe. You can grab that DOM and analyze and modify it however you see fit.

 

Why is this a problem?

Link to comment
Share on other sites

Hi HartleySan,

 

With your new message, I think I might understand what you mean. But then the problem is on my part: I know what to do up to the iframe part; but I have no knowledge to do with the JS part in the banner ("after that JS executes, there will be...").

 

Looks like a client side JavaScript is more complicated than I thought so I may just let those banners open the windows the way they were designed.

 

Anyway, thanks for looking into my question.

Link to comment
Share on other sites

Hi HartleySan,

 

The plain text (html) files are in my #9 message - I now repeat them below with their code in the quotes, for your easy reference:

 

See samples modified from your files:
PAGE HOLDING THE IFRAME:
 
<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta charset="UTF-8">
    
    <title>iframe demo</title>
    
  </head>
  
  <body style="margin:0; padding:0; background-color:transparent;">
    
<iframe style="width:300px; height:250px; background-color:transparent;" name=inline src="/h5/testa09/testa-c.html" frameBorder=0 scrolling=no allowtransparency="true">
    
  </body>
  
</html>
BANNER FILE ON ITS OWN:
This "testa-c.html" banner file can be submitted from third party and will be inserted in the iFrame in the above parent page. As you can see from the below, I cannot use the anchor and target="_blank" method suggested by you.
 
<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta charset="UTF-8">
    
    <title>Page loaded in iframe</title>
    
  </head>
  
  <body>

<!--ORIGINAL CONTENTS
    
    <a href="http://www.google.com" target="_blank">Google (new window)</a>
    
-->

<script type="text/javascript"> 
var tweenui_cid = "c5a17c7d-55f7-4f29-bfa1-e9e506da71af"; 
var tweenui_pid = "5234ffa3-dfbd-4270-b161-83342b8d7e3a"; 
var tweenui_width = 300; 
var tweenui_height = 250; 
</script> 
<noscript>Activate javascript to view TweenUI <a href="http://tweenui.com">mobile banner creator</a> content.</noscript> 
<script type="text/javascript" src="http://display.tweenui.com/show.js"></script>
    
  </body>
  
</html>

Please let me know if the above is what you want me to do or if I have missed anything. Thanks.

 

 
 
Link to comment
Share on other sites

Your iframe is missing an end tag.

 

Please see the following link for information on how to get the contents of an iframe:

http://stackoverflow.com/a/927023/1992973

 

Once you have the iframe document captured as a DOM object, you can do whatever you want with it. As an example that only works in W3C-compliant browsers:

var iFrame =  document.getElementById('id_description_iframe');

var iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];

var iFrameBodyLinks = iFrameBody.getElementsByTagName('a');

for (var i = 0, len = iFrameBodyLinks.length; i < len; i += 1) {
  
  iFrameBodyLinks[i].setAttribute('target', 'whatever-target-you-want-here');
  
}

// After that, use the iFrameBody variable to insert the iframe content back into the iframe.

Does that make sense?

Link to comment
Share on other sites

Hi HartleySan,

 

That is too complicated for me - I simply am not at that grade yet.

 

But again, thank you for looking into the question and trying to help. I really appreciate it!

Link to comment
Share on other sites

Well, you didn't say that.

I just assumed that you wanted some JS code to do the job.

If not, then you'll just have to use whatever they give you.

I imagine that most ads would open in a separate window when you click on them anyway, and I think that's what most people want/expect.

Link to comment
Share on other sites

thanks Hartleysan,

 

i did thought that a js code could achieve my goal but didn't expect that complicated.

 

yes, using the banners the way they were designed seems to be the only way for my site for now.

 

and again, thanks for trying to help!

Link to comment
Share on other sites

Hello HartleySan,

(and those who might be interested)

 

I found the Javascript from this page likely to be able to achieve what I wanted:

http://www.quirksmode.org/js/popup.html

 

I have modified the code from the above page a bit, and the result seems to be close to what I want. Here are two files containing my modified code...

 

1) PARENT PAGE HTML CODE:
---------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0; padding:0; background-color:transparent;">

<div style="margin:36px; padding:18px; background-color:#eee;">
Image below is in iFrame:<br>
<iframe style="width:300px; height:250px; background-color:transparent;" name=inline src="00-h5banner3in.html" frameBorder=0 scrolling=no allowtransparency="true">
</iframe>
</div>

</body>
</html>
2) BANNER FILE HTML CODE:
File name = "00-h5banner3in.html"
---------------------------------------------
In the code below, changing the "target option" (on line 11) in the Javascript in the HEAD tags will control the target window of the link in the BUTTON of the page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
<!--
//NEWWINDOW TARGET OPTIONS: '_self'; '_top'; '_parent'; '_blank'; 'namedWindow';
function windowTARGET(url) {
	newwindow=window.open(url,'_top');
	if (window.focus) {newwindow.focus()}
	return false;
}
// -->
</script>
</head>
<body style="margin:0; padding:0; background-color:#ccbbcc;">

<input type="button" value="Open window" onclick="return windowTARGET('http://www.homesmarketing.com/')">

</body>
</html>

As you can see, though, the above example uses a BUTTON to open a target link to demonstrate the use of the Javascript. If the INPUT-BUTTON link is replaced with a third-party banner ad (Flash or H5 banner), the Javascript function above will not work unless the function "windowTARGET" is incorporated in the banner ad.

 

Any comments please?

 

Thanks.

 

(Edit 130728)

Link to comment
Share on other sites

 Share

×
×
  • Create New...