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
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.
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)
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
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/
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.