How to Select iFrames, Based on SRC, and Add a Class - javascript

I'd like to select all iframes on our site where the src contains go.pardot.com and then add a class called pardotIframe.
There could be multiple iframes on a page and most, but not all will contain go.pardot.com in the src. I'm hoping to use src because most iframes do not have a class or id attribute.
Here is an example of the iframe code:
<iframe src="https://go.pardot.com/l/43312/2017-02-21/67lkx6" type="text/html" frameborder="0" allowtransparency="true" style="border: 0px; overflow: hidden;" scrolling="no"></iframe
How would I do that using jQuery? Thanks!

To achieve this you can use the Atrribute Contains selector to find the iframe by the URL in the src, then simply add a class to it:
$('iframe[src*="go.pardot.com"]').addClass('pardotIframe');

Related

How to display an image on an iFrame?

I have a div which contains an iFrame:
<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have an image url from my server and I am trying to set the iFrame's src to the image url. But it starts a download of the image url on update.
cameraView.src = event.info.data['image_url'];
How to set an image url on an iFrame and display it?
as scrappedcola said, this is an odd usage of iframes, but I'll assume you have a powerful argument for it.
I can think of two possible solutions:
The headers of the image being sent by the server are not adecuate
for it to be displayed in the iframe, the browser might just
interpret it as a binary file to download. Check if you can adjust them.
https://jsfiddle.net/0ftobver/2/ << check the headers of the placeholder image
Use srcdoc or injection of html in the iframe, something like:
cameraView.srcdoc = '<!html doctype><style>*{padding:0;margin:0}</style><img src="https://via.placeholder.com/350x150">'
https://jsfiddle.net/q3rvd418/2/
Injection would be similar but accesing the contentDocument property of the iframe.

Javascript: How can I get ancestor element of a dynamically written iframe from within the iframe?

I have a div on a page that is used by Google to write out a child div and child iframe ad inside of it.
<div id="ads-pos-111" class="module ad ad-111" data-pos="922"></div>
When the iframe ad is written, the DOM looks like this:
<div id="ads-pos-111" class="module ad ad-111" data-pos="922">
<div id="google_ads_iframe_/123456/consumer/hco_3__container__" style="border: 0pt none;">
<iframe id="google_ads_iframe_/123456/consumer/hco_3" title="3rd party ad content" name="google_ads_iframe_/123456/consumer/hco_3" width="1" height="8" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom; width: 100%; height: 578px; margin: 0px;"></iframe>
</div>
</div>
I want to write Javascript code inside the iframe that can traverse its ancestors to get the value of the data-pos attribute two ancestors above. I would like to use something like jQuery.closest('.data-pos').
I cannot use the iframe name as an anchor point as the name is generated dynamically by Google. Nor can I use the parent div ID, as there are potentially multiple ads on the page. So,I can't use code like window.parent.$('#google_ads_iframe_/123456/consumer/hco_3') as I won't know the ID. Each iframe needs to "self-detect" what "data-pos" it is located in.
Has anybody encountered this situation?
(iframes are served on same domain as parent page)

How do I make a frame compatible with anchor

I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame

Change the body background based on specific div's attribute

I do have a div which will load youtube videos with ajax and the div ID would be change based on the video is playing on it.
I was wondering if there is anyway to get the div ID and change the body background based on that.
<div id="video-load">
<iframe id="player_ID" video-id="player_ID" src="http://www.youtube.com/embed/<?= get_field('youtube_video_id_main'); ?>?enablejsapi=1&rel=0&autoplay=1&controls=2&showinfo=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
$('iframe').each(function(){
$(body).css('background', $(.this).attr('video-id'));
});
Any help would be appreciated.
You have to replace (body) by ('body'). The FIDDLE:
http://jsfiddle.net/hz5rppy7/

JQUERY gotcha, Why can't I change inside an iframe that is hosted locally?

Give the following on a page:
<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>
The following works:
$('#hi-world').css("width","10px");
But what I want to do is change the paragraphs in the iFrame, and this does not work:
$('#hi-world').find('p').css("background","red");
ok just figured it out:
$('#hi-world').contents().find('p').css("background","red");
The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.

Categories