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
Related
in my Wordpress site I use a plugin that allows me to view external pages in an iframe that changes its height based on the height of the content.
The page I try to load in the iframe is a simple html page that calls a javascript.
This however prevents the iframe from changing its height.
Can it be solved in any way?
Thanks.
Here is the code of the html page that must be loaded into the iframe:
<body>
<script type="text/javascript" src="https://www.domain-name.com/script-name.php?param1=1¶m2=22"></script>
</body>
give div ID or Call and the CSS
height : 100vh ;
try this code on load
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe_block' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
I've an iframe that contain an HTML page.Now I want to get class of the parent item that clicked.
this is my ifram:
<iframe src="//example.com" id="frame" ></iframe>
this is css:
#frame{ width:380px; height:420px;}
this is my script:
$(document).ready(function() {
var iframe = document.getElementById('frame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document.body;
$(innerDoc).on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert(innerDoc.getElementById(thisID));
$(thisID).click(function() {
var Allclassnames = $(thisID).parent();
console.log(Allclassnames);
});
});
});
but it return the item was clicked only.how to fix it?
Demo:DEMO
NOTE:these are in a same domain.maybe below DEMO not worked for this reason.but I'm sure that my HTML is inside of the same domain with my web site.
thank you.
Add sandbox attributes to the iframe
<iframe src="/example.html" id="frame" sandbox="allow-scripts allow-same-origin"></iframe>
Change the script to
<script>
$('#frame').load(function() {
$('#frame').contents().on('click', function(e) {
var thisID = ((e.target).id);
alert(thisID);
alert($('#'+thisID,this));
$('#'+thisID,this).click(function() {
var Allclassnames = $(this).parent();
console.log(Allclassnames);
});
});
});
</script>
Make sure that every element in frame doc. have some id or else the alert() may throw an error.
To see the console message of iframe you need to change the scope from the scope dropdown , it's in console tab besides the filter icon in the chrome developer tools.
You cannot interact with the contents of an iframe unless it is on the same domain as the parent document.
See:
https://en.wikipedia.org/wiki/Same-origin_policy
The problem was, that I had an <iframe> with dynamically changing content. I couldn't find any other way to dynamically change the height of the <iframe> element than sending new height each time when it changes to the bloggers website by parent.postMessage. The solution works (maybe it can help others, but the thing is that I'm not sure if I have done it in a safe way.
I just want to ask if it's safe to use window.parent.postMessage('Some message', '*') in that way?
Embeded site:
<script type="text/javascript">
var framesHeight = 0;
setInterval(function(){
var newFramesHeight = window.document.getElementsByTagName('html')[0].offsetHeight;
if (newFramesHeight !== framesHeight) {
window.parent.postMessage(newFramesHeight, '*');
framesHeight = newFramesHeight;
}
}, 500);
</script>
As you can see, each time when the hight changes I send a new message.
On the bloggers website I want to embed this:
<script>
window.addEventListener('message', function (evt) {
if (evt.origin === 'http://mypage.com' && !isNaN(evt.data)) {
document.getElementById('embedID').style.height = evt.data+'px';
}
}, false);
</script>
<iframe id="embedID" src="http://mypage.com/embed/11" frameborder="0" style="width: 100%; height: 100%;" scrolling="no"></iframe>
<iframe id="payframe" src="~" width="100%" height="3000" frameborder="0" scrolling="no" onload="scroll(0, 0);"></iframe>
my current iframe code is like above. its height is set as 3000 not along the content. To fix this and match with content length, in my HTML page which will be inserted in to iframe, I wrote like this.
$(document).ready(function() {
autoResize();
});
function autoResize(){
var newheight;
var newwidth;
newheight = document.getElementById("register_apply").contentWindow.document.body.scrollHeight;
parent.document.getElementById("register_apply").height = (newheight) + "px";
}
register_apply is the id for the wrapper, which contains all content. After making iframe height 0 I tried but it doesn't work. Is there any that I have to modify?
I have iframe inside the column of <asp:table>. I want to get the object of an iframe in javascript. I tried like this in <body> section:
<script type="text/javascript">
function resizeIframe()
{
var height = document.documentElement.clientHeight;
height -= document.getElementById('frame').offsetTop;
height -= 20;
document.getElementById('frame').style.height = height + "px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>
But I'm getting error like "object expected or null".
Your document has probably not finished loading (so, #frame does not exist yet). To fix this, make sure that the frame already exists by adding the code after the frame (or at the end of the document):
<iframe .../> ...
<script>
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
</script>