Is there a way to remove all anchor title attributes in all links within an iframe so that when you hover over them you don't get the title?
I know I can do something like the following but for some reason it isn't working.
$("iframe").load(function() {
$("iframe").contents().find("a").each(function(index) {
$(this).attr('title','');
});
});
If iframe uses same protocol and domain, you can change iframe's content.
Different protocol or domain will generate an Security Exception.
This will work for you on the same domain:
$('iframe').load(function(){
$(this).contents().find('a').removeAttr('title');
})
If you are not on the same domain, it will not work. See the following SO Question/Answer:
Get DOM content of cross-domain iframe
Given the contents of iFrame is from same domain you can use the following for every anchor tag
$('a').removeAttr('title');
Try This:
Javascript: Demo
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
var links = innerDoc.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].removeAttribute("title");
}
Jquery: Demo
setTimeout( function () {
$("#iframeId").contents().find("a").removeAttr("title");
}, 1000 );
Related
I have seen this question many times, and a lot of the answers seem to suggest the base target="_blank" technique. However, I have used this before in the past; but my current page it does not work. I also don't think it could be best option even if it did work; as I ONLY want the links within the iframe src="" to open in a new window. I am hopping there's a simple solution I can add inline to the page. I have also tried adding an id as below, and using JavaScript, still nada.
<iframe src="mywordpressfeed.html" id="frame1" width="310" height="380"></iframe>
JS
$(document).ready(function(){
$("#frame1").attr("target","_blank");
});
Basically the goal is to when a user sees my wordpress feed within the iframe I have on a static page; once the post title is clicked it loads in a new window - as now it loads within the same iframe so there isn't an increased level of readability.
There is no real solution to this, due to the iFrame tag being developed for the opposite.
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('iframeID') );
//Get all links
var links = inside.getElementsByTagName('a');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('target','_blank');
}
//No jQuery needed!
thanks to meder
EDIT
Due to iframe same source restrictions I had to find a website with inner iframe from same source so you can paste this code
//pass the iframe to this iframe getting function
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
//Get Iframe
var inside = iframeRef( document.getElementById('IFwinEdit_Gadget_247730_3349') );
//Get all links
var links = inside.getElementsByTagName('input');
//Loop throught links and set their attributes
for (var i = 0 ; i<links.length ; i++){
links[i].setAttribute('style','background:red');
}
//No jQuery needed!
to the console in this web site and see the inputs change color
I am trying to remove iFrame tags in my documents.
This is the function. But it don't seem to work. Here is my sample code
<script>
function removeiframe() {
alert("Hello Lovely World");
var markup = document.body.innerHTML;
var filtered=markup.replace(/(<iframe.*?>.*?<\/iframe>)/g,"");
alert("he: " + markup);
//markup = Regex.Replace(markup, #"<script.*?/script>", "", RegexOptions.IgnoreCase);
//markup = Regex.Replace(markup, #"<iframe.*?/iframe>", "", RegexOptions.IgnoreCase);
markup = filtered;
document.body.innerHTML = markup + "<hr><hr>HELLO";
}
</script>
<body onload="removeiframe()">
<iframe marginheight="0" src="http://www.hotelanswer.com" marginwidth="0" frameborder="0" height="180" scrolling="no" width="210"></iframe><br>
</body>
Here's a script you can run that will remove all the iframes from your document. Here's an example of this working: http://jsfiddle.net/5hh9H/
var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}
Pure Javascript code:
document.querySelectorAll('iframe').forEach(
function(elem){
elem.parentNode.removeChild(elem);
});
You didn't mention why you need to remove iframes in the document.
I do it in order to prevent Clickjacking attack. But it will work in any cases.
You need this:
<style id="defendClickjack" type="text/css">body{display:none;}</style>
and then
<script type="text/javascript">
if (self === top) {
var defendClickjack = document.getElementById("defendClickjack");
antiClickjack.parentNode.removeChild(defendClickjack);
}
else {
top.location = self.location;
}
</script>
You can find more information here:
https://www.owasp.org/index.php/Clickjacking
http://en.wikipedia.org/wiki/Clickjacking
Slight improvement here to Matt's original example if you want to only do it on mobile. For me, the use case was that I'm using a Vimeo embed on my site to create a video background. I needed to ditch the video on mobile for performance. This does the job.
$( document ).ready(function() {
let isMobile = window.matchMedia("only screen and (max-width:650px)").matches;
if (isMobile) {
var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}
}
});
s.ermakovich's comment about code not working properly with more than one iframe is not 'wrong' but a bit misleading...and depends on the situation. My Vimeo iFrame had a child frame making requests that continued after DOM complete. Matt's code did destroy both.
In my case my 2nd iframe was a direct child of the parent. The code might not work if you have several iframes on a page that are not direct children of the same parent and you just copy and paste that code. In this case you need to be more specific:
If you have multiple iFrames on your page you can add specificity to your query selector. Your choice if you want to use querySelectorAll() or not based on the situation, but I see no reason why querySelector() can't be used either.
document.querySelector(".foo > bar iframe")
document.querySelector("foo bar > iframe")
If you have a grid of iframes, perhaps several embedded videos in a row perhaps
document.querySelectorAll("foo > .bar > iframe")
or maybe better from the same data source...
document.querySelectorAll("iframe[data-src]")
Someone please correct me if I'm wrong somewhere
You should put the iframe inside of a div element.
<div id="kk">
//your iframe
</div>
Then use jQuery to remove the iframe.
$('#kk').click(function(){
$(this).html("");
});
This is a possible solution.
i want to get spesific contents (all of spans in .y6) in iframe without jQuery,
How can i write it only javascript?
"#canvas_frame" is an iframe
spans = $("#canvas_frame").contents().find(".y6>span");
If the iframe is on the same domain as the parent page you can use the iframe's contentWindow property.
Something like the below should help you out:
var canvasFrame = document.getElementById('canvas_frame').contentWindow,
allSpans = canvasFrame.document.getElementsByTagName('span'),
spans = [],
i;
i = allSpans.length;
while(i--){
if(/y6/.test(allSpans[i].parentNode.className)){
spans.push(allSpans[i]);
}
}
I have an IFRAME that should be filled with content from JavaScript. Had the content be on the server all I had to do is:
function onIFrameFill() {
myIframe.location.href = "HelloWorld.html";
}
But the content I have is a HTML page generated on the client and represented as a string (I have not much influence on it). How can I populate the content of the my iframe programatically?
I think you're looking for something like:
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('hello world');
iframeDoc.close();
Tried setting .innerHTML but that does not work. Solution by Jeffery To works. Just want to add that myIframe.contentWindow might not work in old browsers (read IE old versions) so you can do
var iFrameWindow = myIframe.contentWindow || myIframe.documentWindow;
var iFrameDoc = iFrameWindow.document;
then use the document open(), write() & close() as above.
What about .innerHTML?
myIframe.innerHTML = "This is some HTML <b>text</b>";
Similar to Jeffry but using contentDocument instead.
let iframe = document.querySelector('iframe');
let doc = iframe.contentDocument;
doc.open();
doc.write('Hello world!');
doc.close();
How do you get a <div> from within an <iframe>?
var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
You could more simply write:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
and the first valid inner doc will be returned.
Once you get the inner doc, you can just access its internals the same way as you would access any element on your current page. (innerDoc.getElementById...etc.)
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting. Reference:
MDN: <iframe> Scripting
MDN: Same-Origin Policy: Cross-Origin Script API Access
Do not forget to access iframe after it is loaded. Old but reliable way without jQuery:
<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>
<script>
function access() {
var iframe = document.getElementById("iframe");
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
console.log(innerDoc.body);
}
</script>
Above answers gave good solutions using Javscript.
Here is a simple jQuery solution:
$('#iframeId').contents().find('div')
The trick here is jQuery's .contents() method, unlike .children() which can only get HTML elements, .contents() can get both text nodes and HTML elements. That's why one can get document contents of an iframe by using it.
Further reading about jQuery .contents(): .contents()
Note that the iframe and page have to be on the same domain.
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')
CallYourFunction() is function inside page and that function action on it
None of the other answers were working for me. I ended up creating a function within my iframe that returns the object I was looking for:
function getElementWithinIframe() {
return document.getElementById('copy-sheet-form');
}
Then you call that function like so to retrieve the element:
var el = document.getElementById("iframeId").contentWindow.functionNameToCall();
If iframe is not in the same domain such that you cannot get access to its internals from the parent but you can modify the source code of the iframe then you can modify the page displayed by the iframe to send messages to the parent window, which allows you to share information between the pages. Some sources:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Html5 - Cross Browser Iframe postmessage - child to parent?
cross site iframe postMessage from child to parent
You can use this function to query for any element on the page, regardless of if it is nested inside of an iframe (or many iframes):
function querySelectorAllInIframes(selector) {
let elements = [];
const recurse = (contentWindow = window) => {
const iframes = contentWindow.document.body.querySelectorAll('iframe');
iframes.forEach(iframe => recurse(iframe.contentWindow));
elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
}
recurse();
return elements;
};
querySelectorAllInIframes('#elementToBeFound');
Note: Keep in mind that each of the iframes on the page will need to be of the same-origin, or this function will throw an error.
Below code will help you to find out iframe data.
let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;