jquery access element inside iFrame - javascript

I have a page which has an iframe element inside it. This iFrame contains two levels of document inside it.
Here is the short version of code (removed most of stuff as otherwise it would be too big)
<iframe src="some soruce" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<iframe id="player" src="some source" width="863" height="486" frameborder="0" scrolling="no">
<html>
<head>...</head>
<body>
<div id="mediaplayer_wrapper" style="position: relative; width: 863px; height: 486px;">
<object type="application/x-shockwave-flash" data="/new-flash-player/player.swf" width="100%" height="100%" id="mediaplayer" name="mediaplayer" tabindex="0"></div></div>
<div id="banners_area" style="position: absolute; top: 0px; left: 0px; width: 863px; height: 486px; display: none; background-color: white;">
<br>
</div>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
What I am trying to do, is to access via jQuery the mediaplayer object and trigger a function on it. I have tried the following:
var p = jQuery("mediaplayer");
p.hideGate();
and also
var p = $("#iFrame").contents().find("#mediaplayer");
p.hideGate();
but none of them have worked. (gave me an error that hideGate is not defined. However when under developer I switch myself to the content of that particular player, and execute the very first code, it suddenly works.
What am I doing wrong here? How come I cannot trigger the function?

hideGate is not a standard jQuery method. It must be provided by a plugin.
You have multiple documents, and that plugin is loaded into the version of jQuery that is in the framed document with the #mediaplayer element in it.
When you call jQuery from the parent frame, you are using the version of jQuery there … which doesn't have the plugin installed.
You can probably solve this by loading the plugin script into the document in the parent frame.
Failing that, you would need to call the jQuery function from the document in the frame. (Possibly $("#iFrame")[0].contentWindow.jQuery("#mediaplayer") would do that, but I don't have time to write a test case to be sure right now).

Perhaps you want to try the .contentWindow property as shown in: http://www.w3schools.com/jsref/prop_frame_contentwindow.asp
Hope it helps.

Related

Getting iframe data from Android WebView

I have a web page that contain an iframe:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
#document
<!DOCTYPE html>
<html>
<head>....</head>
<body>....</body>
</html>
</div>
for getting all of html source, i used this javascript:
javascript:HTMLOUT.processHTML(document.documentElement.outerHTML);
But, when the listener is invoked, i just see:
<div id="confIMG" style="display:block;">
<iframe id="ifrmy" src="http://www.example.com" style="margin:0;padding:0;border:0;overflow:hidden;height:200px;width:90%;'" scrolling="no">
</iframe>
</div>
the issue is that all iframe document is missed. How can i get them all?
I also tried to get the page using JSOUP. in that case, i'm only get:
<div id="confIMG" style="display:block;"></div>
PS: i tried to check using Chrome browser. I can only see source code when i use developer options / developers tools into tab elements.
JSoup won't fetch automatically the iframe content if you don't ask it to do so.
When you have first loaded the page, find the iframe then fetch it with Jsoup.
Document doc=...
Element ifrmy = doc.select("#ifrmy").first();
if (ifrmy!=null) {
Document iframeContent = Jsoup.connect(ifrmy.attr("src")).get();
// ...
}

Can't move scrollbar inside of an iframe

I have an issue. I'm using this plugin for custom scrollbars, and have set it up to show up in iframe but I can't scroll on neither the Y or X axis. The content just doesn't load. (?) I have used this example and set the height to 100%. This is what I got so far:
<div id="iframecontainer" style="height: 100%; position: relative; overflow-x:hidden;
overflow-y:hidden;">
<iframe src="http://imgur.com/a/LqmeJ?gallery" scrolling="no" width="1000" height="100%" frameborder="0"></iframe>
</div>
//I use this javascript code to run the scrollbar plugin.
//I also include its files in <head> tag.
<script type="text/javascript">
$(window).load(function(){
$('#iframecontainer').mCustomScrollbar({
theme:"minimal-dark", scrollInertia: 0, axis:"yx"
});
});
</script>
I found a workaround for now, I set height to 99999px and I can scroll websites endlessly, but that's okay, because everything else works. It seems that there is no other way to fix that.

Embed PDF at full height

My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.
There are several ways to embed PDF in HTML.
One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a></p>
</object>
Or you could use the google drive viewer to display any PDF (and quite a few more file types):
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Using the drive viewer your visitors don't need any additional software/plugin to view the files.
You can then adjust the height of the PDF container with css. i.e
#yourcontainer { height: 100vh; }
None of the above answers worked for me.
The following worked across every platform I needed it to (ie, I didn't test IE).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
</body>
</html>
You must to set width\height a container
<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>
Look example
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Make sure you use <object> - EMBED vs. OBJECT
<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>
I like the functionality that comes with the html objects for PDFs as opposed to some libraries like PDF.js for light projects. This is definitely not the best answer but I'm currently using JQuery with Bootstrap in an Angular 6 app so I modify height after the the view loads.
I set
<object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>
then in my component I adjust the height based on the ratio of the width to height.
For example, an 8 x 11.5 document would give the height 1.4375 x the width.
ngAfterViewInit(): void {
var width = $("#pdf").width();
$("#pdf").prop("height", width * 1.4375 + "px");
}
Saw this post and figured I would post. Hope this helps and please correct me if you think this is bad coding practices.

iframe has eaten my JavaScript codes. What's going wrong?

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
</div>
<script type="text/javascript">
console.log("test");
</script>
<body>
</html>
Here, I have placed the JS codes at the bottom of the page. And the result is it's eaten. If I remove the iframe element, the codes work fine. Evidently, the iframe I place here is an empty one without linking to any source. Hence, no other inline JS codes are brought in. BTW, if I put scripts in the head block, they work fine too.
I really don't know WHY? Could anybody give me some comments?
Use a validator (such as http://html5.validator.nu/ or http://validator.w3c.org). The biggest problem you have is that you're not closing the iframe with a </iframe> tag. Anything between iframe tags will only show for clients who have iframes disabled.
Final code should look like:
<iframe id="frame" allowfullscreen="allowfullscreen" frameborder="0" style="height: 300px; width: 100%">
This page requires iframes... blah blah.
</iframe>
In the future, always validate when you're not 110% sure.

Google Maps not functioning for me

My Google maps code is all squared away and valid, but it doesn't load on the page. Here is the page in question, I have full availability to code, not sure why it's breaking:
http://whs.rjuhsd.us/calendar/map
The Gmaps JS is in the header, with the correct key. Sensor is set to true, and the element is defined in the document, displayed properly, in the right spot and available to the user.
Halp?
Looks like you have conflict between jQuery and Prototype.
Use the noConflict mode of jQuery.
PS: Why are you using both?
Chetan is right, you are running into a conflict between jquery and Prototype. I see that you have called jquery.noConflict() once, but then after that you import jquery again into your document, thus undoing the noConflict:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
... snip ...
<!-- following scripts are for the jwPlayer installations oct.09 -->
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/jwplaylist/jquery-1.3.2.min.js">
</script>
Is there any reason why you didn't just update the swfobject.js to use the earlier version of jquery?
I see two links to google maps, but I assume you want to display a google map as part of this page right?
There's an empty DIV on your page:
<div id="map_canvas" style="width: 500px; height: 300px;"></div>
Maybe this is where you intended to embed the map? If so, you can try to replace it with the following:
<div id="map_canvas" style="width: 500px; height: 300px;"><iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2551+Woodcreek+Oaks+Blvd.+Roseville,+CA,+95747&sll=37.0625,-95.677068&sspn=41.767874,58.535156&safe=on&ie=UTF8&t=h&hq=&hnear=2551+Woodcreek+Oaks+Blvd,+Roseville,+Placer,+California+95747&ll=38.764056,-121.330884&spn=0.015209,0.020106&z=16&output=embed"></iframe><br /><small>View Larger Map</small></div>

Categories