I have a website with an iFrame element inside it. Now I need to remove a particular element from the website that is being loaded in the iFrame.
I am using javascript. The link mentioned is in the same server. I loaded the jquery in the head of the site.
<iframe id="ContentiFrame" src="LINK" class="section main" width="998" height="200" frameBorder="0">
</iframe>
<script>
$(this).load("LINK")
$(window).on('load', function()
{
var $iframe = $('#ContentiFrame'); //this is the name of the iframe ... EDITED added #before name
var $contents = $iframe.contents();
var $logo = $contents.find('.logoContainer');
$logo.remove();
});
</script>
For some reason, this is not working for me. Thanks for any help.
You forgot the # on the ID of the iFrame.
Try this:
var $iframe = $('#ContentiFrame');
^
You need to use # for id
var $iframe = $('#ContentiFrame');
Use Jquery scope parameter：
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var body=iframebody.contentWindow.document.body;
var logo=$("#ContentiFrame",body);
logo.remove();
I sugget include a jquery.js in iframe page,so you can do like this:
var iframe = $('#ContentiFrame');
var iframebody=$iframe.get(0);
var frameWindow=iframebody.contentWindow;
var logo=frameWindow.$("#ContentiFrame");
logo.remove();
Related
I can't put any id or class to the iframe I work because of some technical issues, and this iframe sometimes don't show any content inside and I am having a blank space instead.
I wanted to make the iframe disappear when it loads blank, to protect my page's structure with javascript.
Here is the code I wanted to make it disappear when there are no contents.
<div id="myDiv">
<iframe width="363" height="300" src="javascript:false">
<div id="iframeDiv">
----Contents----
</div>
</iframe>
</div>
I tried below script but somehow it doesn't work. Thanks in advance.
<script type="text/javascript">
setTimeout(function () {
var myTag=document.getElementById('myDiv').getElementsByTagName('iframe');
var myTagContent = myTag.contentDocument || iframe.contentWindow.document;
var myTagDiv = myTagContent.innerDoc.getElementById('iframeDiv');
if (myTagDiv === null)
{
document.getElementById("myDiv").style.display = "none";
}
}, 500);
</script>
Remove the outer <div> before <iframe>.
Add id="ifr" to <iframe> tag.
Then:
iframeDivElement = window.parent.getElementById('ifr').document.getElementById(iframeDiv');
EDIT:
Alternatively you can use iframe index in your document.
iframeDivElement = window.parent.frames[0].document.getElementById(iframeDiv');
Hello I try to modify width attribute for all iframe
here what I did :
var editor = tinymce.get('editor1');
var content = editor.getContent();
content = content.replace(/width=".*?"/ig, 'width="660"');
editor.setContent(content);
It works but my regex will modify all tag which contain width attribute and what I want is only modify iframe width attribute
Here's the solution with regex, but I suggest the other solutions, it's better use the DOM API instead regex.
var str = '<p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p><p> toto </p><p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p>';
str = str.replace(/(<iframe.*?)width="\d+"(.*?<\/iframe>)/gu, '$1width="660"$2');
console.log(str);
I would copy the content into a container element and manipulate the DOM, then copy it back into the editor. Like this:
var editor = tinymce.get('editor1');
var content = editor.getContent();
var container = document.createElement('div');
container.innerHTML = content;
var iframes = container.getElementsByTagName('iframe');
Array.prototype.forEach.call(iframes, function(iframe){
iframe.setAttribute('width','660');
});
editor.setContent(container.innerHTML);
As you use jquery I would go this way :
$('iframe').attr("width", function(index,attr) {
return 600;
});
See : https://jsfiddle.net/vj0ohnav/2/
I Have a div something like this
<div id="tid">
<iframe>
<html>
<body>
<scripts></scripts>
<iframe>...
//more content
<ifram>
</body>
</html>
</iframe>
</div>
I want to get below using javascript.
<iframe>
<html>
<body>
<scripts></scripts>
<iframe>...
//more content and cannot guess how many iframes are there.
<ifram>
</body>
</html>
</iframe>
InnerHtml only return first iframe only. I tried with .contentDocument.getElementsByTagName('body')[0].innerHTML. but this only return first iframe. I want get all the content into string variable without using jquery.
Thanks
YOU NEED TO REPLACE < WITH < AND > WITH > TO PRINT HTML TAGS AS A PLAIN TEXT.
try this code,
var content = document.getElementById('tid').innerHTML;
content = content.replace(/</g,"<").replace(/>/g,">");
document.getElementById('content').innerHTML = content;
SEE THIS DEMO
if you want to reuse that div html, simply add that content to any other html element like below,
var content = document.getElementById('tid').innerHTML;
//the variable content contains the html inside "tid" div.
var iDiv = document.createElement('div');
iDiv.id = 'newDiv';
iDiv.innerHTML = content;
document.getElementsByTagName('body')[0].appendChild(iDiv);
SEE THIS DEMO
If you only want the body tags this should work.
var els = document.getElementsByTagName("body");
var allContent = "";
for (var i=0; i < els.length; i++) {
allContent += els[i].innerHTML;
}
Do this
var iframe = document.getElementById('iframeID');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
now you can use iframeDocument to access content of iframe, jquery does the same
UPDATE
You can do something like this ..
var myDiv = document.getElementById("tid");
var iframes = myDiv.getElementsByTagName("iframe");
// now loop over the iframes
for(iframe in iframes){
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var internalIframes = iframeDocument.getElementsByTagName("iframe");
if(internalIframes.length > 1){
// start the for in loop again
}
}
can not do this because of same origin policy
I am trying to show some video files in an Iframe for our company web site. Whenever the user clicks on a video link it will be shown inside an Iframe. I used a Javascript file to perform this action. If I host my videos on you tube, you tube show the title of video.But the javascript I used only change the content of the iframe. I need to show the title of the video files somewhere above the Iframe.
The javascript file I use is this :
<script type="text/javascript">
function ChangeVideoUrl(url)
{
document.getElementById("video_iframe").src = url;
}
</script>
and in I wrote this :
<a class="links" href="JavaScript:ChangeVideoUrl('https://..something.');"> text</a>
Any Ideas?
You can change the actual title of the iframe with iframeReference.contentDocument.title = 'some title'. If you want to change an html title like a h1 tag, you can get the reference to it and set its textContent. See below.
Sample Markup:
<button id="myBtn">Change Iframe</button>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
Sample JavaScript:
var myBtn = document.getElementById('myBtn');
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
myBtn.addEventListener('click', changeIframe);
function changeIframe() {
myIframe.contentDocument.title = 'New title!';
h1Title.textContent = 'New Title!';
}
Live demo (click).
As you have now updated your question with your code, there is more to say.
First, inline js (JavaScript inside your html elements) is bad. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F
Instead, follow my example and get element references and attach event listeners to them. You can store your data on the element and pull it from there if you want to.
Live demo (click).
Markup:
<div class="links">
<a data-src="a/video" data-title="A video!">Click to Play: A video!</a>
<a data-src="some/title" data-title="Some Title!">Click to Play: Some Title!</a>
<a data-src="another/title" data-title="Another Title!">Click to Play: Another Title!</a>
</div>
<h1 id="h1Title">Iframe Title</h1>
<iframe id="myIframe"></iframe>
JavaScript:
var myIframe = document.getElementById('myIframe');
var h1Title = document.getElementById('h1Title');
var links = document.querySelectorAll('.links a');
for (var i=0; i<links.length; ++i) {
addClickFunc(links[i], i);
}
function addClickFunc(elem, i) {
elem.addEventListener('click', function() {
var title = elem.getAttribute('data-title');
var src = elem.getAttribute('data-src');
changeIframe(title, src);
});
}
function changeIframe(title, src) {
myIframe.src = src;
myIframe.contentDocument.title = title;
h1Title.textContent = title;
}
Assuming some heading for title. You can do this also by javascript.
Give the id for the tag that holding the title of iframe.
Using javascript change the text in that when user click's on video link(chnage innerHTML).
hi i am trying to get inner HTML of iframe element
my html document a structure is like this
<body>
<div>
<iframe id="frame1">
<html>
<button id="mybutton">click me</button>
</html>
</iframe>
</div>
</body>
i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script
var greeting = "hola, ";
document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ;
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
var button = iframeDocument.getElementById("mybutton") ;
if(button ==null)
alert("button is null") ;
i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it.
but i am facing an alert which has button is null but there is button in iframe why i am getting null for this button??
To get the button inside of the iframe, this could work:
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
Obviously, you can navigate to get what you want with iframeDocument, and use .innerHTML as you seem to know. You cannot get the contents of the iframe if the iframe is pointing to a domain other than its parent.
UPDATE:
You need to use the code to get the frame's document and its contents after it's ready, so you should use something like this:
window.onload = function () {
var greeting = "hola, ";
var div1 = document.createElement("div");
var frame1 = document.createElement("iframe");
frame1.id = "frame1";
frame1.onload = function () {
alert("loaded");
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
if (button == null) {
alert("button is null");
}
};
frame1.src = "http://onemoredemo.appspot.com";
div1.appendChild(frame1);
document.body.appendChild(div1);
};
DEMO: http://jsfiddle.net/nqTnz/
The important thing is how the elements are created and appended to the DOM - not just using innerHTML. The onload method of the iframe is to guarantee it's ready. The actual manipulation code won't work in the jsFiddle because the cross-domain problems, but is what you should need.
In jQuery's source code the solution to get the iframe document is like this:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And then you can usually use getElementsByTagName or getElementById to select the DOM-Elements:
var elem;
if (iframeDocument) {
elem = iframeDocument.getElementById('mybutton');
}
Have You tried ????
iframe.srcdoc="<HTML><a id='some_id'>old</a><script>function run(src){eval(src);}</script></HTML>";
And then
iframe.contentWindow.run("document.getElementById('some_id').innerHTML='new content';");