Solved

How to inject 3rd party image tags into container iframe after page load?

Posted on 2016-11-03
5
56 Views
Last Modified: 2016-11-04
I'm trying to fire of static marketing pixels in an iframe based on a condition, after the page has loaded but I can't get it to work? I get the following error on line 12:  Uncaught TypeError: Cannot read property 'parentNode' of undefined
var sTags = ['<img src="https://ad.doubleclick.net/ddm/activity/src=4587700;type=oao;cat=im_oaoc;u11=[URL];u12=[New vs Returning];ord=[Random Number]?" />',
             '<img src="https://ad.doubleclick.net/ddm/activity/src=4587707;type=oao;cat=im_oaoc;u11=[URL];u12=[New vs Returning];ord=[Random Number]?" />', 
             '<img src="https://ad.doubleclick.net/ddm/activity/src=4587777;type=oao;cat=im_oaoc;u11=[URL];u12=[New vs Returning];ord=[Random Number]?" />']           
for(var i=0; i<sTags.length; i++) {
    var iframeTag = document.createElement("iframe");
    iframeTag.setAttribute("width", "1");
    iframeTag.setAttribute("height", "1");
    iframeTag.style.display = "none";
    iframeTag.style.border = "none";
    iframeTag.src = sTags[i];
    var ref = document.getElementsByTagName("img")[0];
    ref.parentNode.insertBefore(iframeTag, ref);
}

Open in new window

So not sure what I'm doing wrong or how I accomplish this?

Thanks!
0
Comment
Question by:894359
5 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41873437
You're setting the src attribute of the new iframe to an <img> tag? The src of an iframe should be a URL.

Do you have any <img> tags on the page? document.getElementsByTagName("img")[0] looks for the first <img> tag on the page. Afterward it will insert the new iFrame with the questionable src attribute in front of it. If there aren't any <img> tags on the page, it will be empty. Hence the error "Cannot read property 'parentNote' of undefined."
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41873462
I'm trying to fire of static marketing pixels in an iframe based on a condition
Why do you want to do this in an iframe? What advantage does that have over a div on the page?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41873710
here how to put three images in an iframe and add this iframe to current document at page load:
<script>
    window.onload = function() {
        var sTags = ['http://path/to/img/1','http://path/to/img/2','http://path/to/img/3'];

        var iframeTag = document.createElement("iframe");
        iframeTag.setAttribute("width", "1");
        iframeTag.setAttribute("height", "1");
        iframeTag.style.display = "none";
        iframeTag.style.border = "none";

        for(var i=0; i<sTags.length; i++) {
            var imgTag = document.createElement("img");
            imgTag.src = sTags[i];
            iframeTag.appendChild(imgTag);
        }

        document.body.appendChild(iframeTag);    
    }
</script>

Open in new window

0
 

Author Comment

by:894359
ID: 41874387
Hi Leakim,
I'll try your solution but it must work after the page loads, so I'll try and see .

Thanks,
MJ

Julian,
I thought it would be more secure using an iframe?

Thanks,
MJ
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41874481
I thought it would be more secure using an iframe?
Secure against what exactly?
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now