My webpage has an embedded iFrame which is using a 3rd party tool within my webpage which means the URL from the iFrame is coming from a different location.
I need to detect the presentation of a scroll bar within the iFrame window when resizing the page, then carrying out a task once it has been detected.
I have tried a variety of different solutions all which have not been successful.
Is this possible?
Many Thanks!
This is the first thing that comes to my mind: http://jsfiddle.net/matias/hhcKn/
just sample code!
HTML:
<div id="body"></div>
JS:
var $iframe = $("<iframe></iframe>").appendTo("#body");
var iframe = $iframe[0];
var doc = iframe.document;
//test this
var content = "<h1>Hello world</h1><br><p>more content!</p>";
//and then this
//var content = "<h1>Hello world</h1><br><br><br><br><br><p>more content!</p>";
if(iframe.contentDocument){
doc = iframe.contentDocument;
}
else if(iframe.contentWindow){
doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();
//this is the part that might interest you
var div_height = $("#body").height();
var iframe_height = $("iframe").contents().height();
if(iframe_height > div_height) alert("scrollbars present");
CSS:
body{
border: 1px solid red;
}
iframe{
border: none;
}
<iframe src="111.html" id="iframeid" height="300" width="800"></iframe>
<script type="text/javascript">
function resizeIFrame(){
$("#iframeid").attr("height", $("#iframeid").contents().height());
}
setInterval("resizeIFrame()", 500)
</script>
Related
How to identify document content which is created under dynamic iframe
code structure
<div id="test" data-parent-url="/test.html" data-iframe-src="/test-header.html" class="sample-header">
// dynamically created iframe element
<iframe style="border-style: none; width: 100%; height: 105px; display: block;" scrolling="no" id="V1__header" src="/test-header.html">
// dynamically loaded document content
</iframe>
</div>
tried:
var ifrme = document.getElementById('V1__header');
var iframeContent = ifrme.contentWindow.document;
var iframeObj = $(iframeContent);
var contentheight = $(iframeObj.find(selector)[0]).height();
ifrme returns null intermittently, Couldnot find the id. Is there any alternative to find the id and the document content which is creted dynamically in code.
if you cant be sure the iframe is loaded, you could wait by testing at time interval:
var timer = setInterval(function(){
if($('#V1__header').length !=0){
clearIntervall(timer);
Identifydoc();
}
},400);
function idnetifyDoc(){
var ifrme = document.getElementById('V1__header');
var iframeContent = ifrme.contentWindow.document;
var iframeObj = $(iframeContent);
var contentheight = $(iframeObj.find(selector)[0]).height();
}
You can use onload callback:
const ifrme = document.getElementById('V1__header');
ifrme.onload = iframeLoaded;
function iframeLoaded() {
//--> logic
}
Add the script inside the body tag.
Today I did a my text editor in iframe. I know that values from iframe doesn't send to database. My first idea relies on sending the values from iframe to the div, and that div data send to DataBase with the respective text formats.
function wlaczTrybEdycji(){
edytorTextowy.document.designMode = "On";
}
function execCmd(command){
edytorTextowy.document.execCommand(command, false, null);
}
function przeniesDane(){
var ramka = document.getElementById("ramka");
var dodiv = document.getElementById("daneIframe");
dodiv == ramka;
}
.textarea2{
width: 700px;
float: left;
height: 240px;
border: 2px solid black;
clear: both;
padding: 5px;
}
<body onload="wlaczTrybEdycji();">
<form action="" method="post">
<div class="EdytorTextowy">
<div class="przyciskiTextEdytor">
<button onclick="execCmd('bold');">BOLD</button>
</div>
<iframe name="edytorTextowy" class="textarea2" id="ramka"></iframe>
<div id="daneIframe">
</div>
<button type="submit" name="wyslijText">WYSLIJ</button><!-- here send from "daneIframe" to DB (PHP)-->
</div>
</form>
</body>
One important thing to understand about what you're doing is that the browser has rules about Cross-document communication.
A page inside an iframe is not allowed to access or modify the DOM of its parent and vice-versa unless both have the same origin. So putting it in a different way: document or script loaded from one origin is prevented from getting or setting properties of a document from another origin.
Here's the docs on Same-Origin Policy from MDN.
If the iframe and the page that loads it are of the same origin you should be able to do exactly what you're trying to do just fine. If not, then these documents need to be made available in the same origin to do so.
Hmm I understand now! You can get elements with ajax or javascript like so :
JavaScript for the Example
The JavaScript displayed here is just an example to show how to access to iframe elements.
// attach handlers once iframe is loaded
document.getElementById('ifrm').onload = function() {
// get reference to form to attach button onclick handlers
var form = document.getElementById('demoForm');
// set height of iframe and display value
form.elements.button1.onclick = function() {
var ifrm = document.getElementById('ifrm');
var ht = ifrm.style.height = '160px';
this.form.elements.display.value = 'The iframe\'s height is: ' + ht;
}
// increment and display counter variable contained in iframed document
form.elements['button2'].onclick = function() {
// get reference to iframe window
var win = document.getElementById('ifrm').contentWindow;
var counter = ++win.counter; // increment
this.form.elements['display'].value = 'counter in iframe is: ' + counter;
}
// reference form element in iframed document
form.elements.button3.onclick = function() {
var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
var ifrm = document.getElementById('ifrm');
// reference to document in iframe
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
// get reference to greeting text box in iframed document
var fld = doc.forms['iframeDemoForm'].elements['greeting'];
var val = fld.value.replace(re, '');
// display value in text box
this.form.elements.display.value = 'The greeting is: ' + val;
}
form.elements.button4.onclick = function() {
// get reference to iframe window
var win = document.getElementById('ifrm').contentWindow;
win.clearGreeting(); // call function in iframed document
}
}
Or you can do something like this in jquery :
var content=$("iframe").contents().find('body').html();
//alert elements in iframe or show elements as a response in and div
alert(content);
I'm trying to edit the size of dinamic content generated on external url.
There's my code:
HTML:
<div id="movie">
<iframe name="ifr" id="ifr" src="http://zeyu.ucoz.es/directvenvio.html" width="100%" height="480" frameborder="0" scrolling="no"></iframe>
</div>
In this source url, there are 2 scripts, that generate an iframe,
I'm trying to change the width and height of this line:
<script type='text/javascript'>
width=620,
height=382,
channel='zeyudirtc',
g='1';
</script>
This is what i'm trying:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ifr').ready(function(){
$('#ifr').contents().find('script').html('width=960, height=480, channel="zeyudirtc" ');
});
});
</script>
But this doesn't work.
Can help me please?
Thanks in advance.
If you have access to the iframes source, it is possible.
You will have to add Javascript Code to the iframe Content and the surrounding page.
The code you need inside the iframe Content should be like this:
First get the height, the iframe needs.
var height = getDocHeight();
var height = $("html").height();
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if(msie > 0){
height = Math.max(
document.documentElement["clientHeight"],
document.documentElement["scrollHeight"],
document.body["scrollHeight"]
);
}
Then you have to send a message to the surrounding page. Like this:
parent.postMessage(height, "DomainOfTheSurroundingPage");
That's it for the iframe.
On the other site you need to listen to the messages.
if (window.addEventListener) {
window.addEventListener ("message", receiveMessage, false);
} else {
if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage, false);
}
}
function receiveMessage(event)
{
var height = event.data;
do something();
}
Now you have the height (in px) to work with.
Wrap the iframe in a div.
Div
--- iframe
Then set the height of your wrapper div to 0 and the padding bottom to the height you submitted.
That should do the trick.
If you cannot add the code to the iframe Content however you can't edit the height and width of the iframe dynamically.
Check css "!important" value. In css this is a "high level"
#ifr {
height: 1000px!important;
}
http://jsfiddle.net/mraranturnik/4vqhLdpq/
OK, this is not a problem script or iframe but movi url. In url you have player size. If you want change player size you mast do somthing this
var playerUrl = $('#ifr').contents().find('iframe').attr('src');
Next write RegExp for url and put new src value for iframe in file :)
Your solution change only iframe size not a player size
I am trying to have a flash-based music player on my page which continues playing a song even when you refresh or go to another page within the web site.
I whant do this like facebook footer
i read this topic
How does Facebook keep the header and footer fixed while loading a different page?
but i have loadpage() and location.hash problem
if someone know how its made plz tell me
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++)
{
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}}
CSS:
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
I have done so
this code not worked, i want to do not refresh area for music player like google videos or facebook task bar
I have done so
function links() {
//var header = document.getElementById("header");
var headerLinks = document.getElementsByTagName("a");
for (var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
loadPage(href);
window.location.hash = "#" + href;
this.blur();
return false;
}
}
}
window.onload = function() {
links();
}
i whant to all links to modify but it's not worked
It looks like you are pretty new to javascript. If that is the case then doing a full ajax site is probably not the place to start. I think you should try going old-school and using frames to accomplish this. (This is how Google Video used to function, and Google Images still uses this technique.)
<html>
<frameset rows="200px,*,200px">
<frame src="yourPageHeaderWithFlashPlayer.html" noresize="noresize"/>
<frame src="yourMainContent.html" noresize="noresize"/>
<frame src="yourPageFooter.html" noresize="noresize"/>
</frameset>
</html>
That would work for a 200px header and 200px footer. If you need more info: http://www.w3schools.com/tags/tag_frameset.asp.
I have a page ,page1.html that loads page2.html via an iframe . I need to change the body color of the iframe page (page2.html) to override the CSS style that's loaded on page2.html.
(both pages are on same domain). How can that be updated via Javascript ?
A bit of googling turn up this:
Scripting IFrames
It suggests window.frames[iframeName].document should work.
Since both pages lives on the same domain it should be easy.
Try this,
var changeIFrameBodyColor = function()
{
var iFrame = document.getElementById('iFrame');
var iFrameBody;
if ( iFrame.contentDocument )
{ // DOM
var iFrameBody = iFrame.contentDocument.getElementdByTagName('body')[0];
}
else if ( iFrame.contentWindow )
{ // IE
var iFrameBody = iFrame.contentWindow.document.getElementdByTagName('body')[0];
}
iFrameBody.style.color = '#ff0000';
}
Change Color
<iframe id="iFrame" src="page2.html" ../>