Cofa Posted July 20, 2013 Share Posted July 20, 2013 Hello, I know this question is outside PHP but I could not find answers with my brief research - I will withdraw this if necessary 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 More sharing options...
HartleySan Posted July 20, 2013 Share Posted July 20, 2013 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 More sharing options...
Cofa Posted July 20, 2013 Author Share Posted July 20, 2013 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 More sharing options...
HartleySan Posted July 20, 2013 Share Posted July 20, 2013 Yes, I imagine what you want to do is possible, but it's hard to say, as you're not being very clear about where the banners are loaded from, whether you're using a third-party API, etc. All the same, the following link may be of use to you: http://stackoverflow.com/questions/1037839/how-to-force-link-from-iframe-to-be-opened-in-the-parent-window Link to comment Share on other sites More sharing options...
Cofa Posted July 21, 2013 Author Share Posted July 21, 2013 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 More sharing options...
HartleySan Posted July 21, 2013 Share Posted July 21, 2013 These banners all seem pretty simple. Why not just make animated GIFs, and then wrap the img elements used to load the GIFs in a elements? From there, you can easily do whatever you want. Link to comment Share on other sites More sharing options...
Cofa Posted July 22, 2013 Author Share Posted July 22, 2013 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 More sharing options...
HartleySan Posted July 22, 2013 Share Posted July 22, 2013 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? 1 Link to comment Share on other sites More sharing options...
Cofa Posted July 22, 2013 Author Share Posted July 22, 2013 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: http://www.cofatsui.com/h5/00-h5banner-c.html BANNER FILE ON ITS OWN: http://www.cofatsui.com/h5/testa09/testa-c.html 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 More sharing options...
HartleySan Posted July 22, 2013 Share Posted July 22, 2013 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 More sharing options...
Cofa Posted July 23, 2013 Author Share Posted July 23, 2013 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 More sharing options...
HartleySan Posted July 23, 2013 Share Posted July 23, 2013 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 More sharing options...
Cofa Posted July 23, 2013 Author Share Posted July 23, 2013 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 More sharing options...
HartleySan Posted July 23, 2013 Share Posted July 23, 2013 Please do me a favor: Load up your iframe (via JS or whatever), and then get the innerHTML of the iframe document and print it out somewhere. After you see that, I think it'll be clear what you need to do. Link to comment Share on other sites More sharing options...
Cofa Posted July 23, 2013 Author Share Posted July 23, 2013 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: http://www.cofatsui.com/h5/00-h5banner-c.html <!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: http://www.cofatsui.com/h5/testa09/testa-c.html 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 More sharing options...
HartleySan Posted July 24, 2013 Share Posted July 24, 2013 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 More sharing options...
Cofa Posted July 24, 2013 Author Share Posted July 24, 2013 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 More sharing options...
HartleySan Posted July 24, 2013 Share Posted July 24, 2013 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 More sharing options...
Cofa Posted July 24, 2013 Author Share Posted July 24, 2013 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 More sharing options...
Cofa Posted July 28, 2013 Author Share Posted July 28, 2013 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 More sharing options...
Recommended Posts