I want to go between pages inside a PDF File contained in a IFRAME by just clicking on a link.
This is what i made so far:
HTML:
Pagina 10
<iframe name="ifrx" id="ifrx" src="1430263377Physic.pdf" style="height:800px; width:1170px">
Script:
<script>
function pagina(pag) {
$("#ifrx").attr('src','').delay(100).attr('src','1430263377Physic.pdf#page='+pag);
return false;
}
</script>
But doesn't work, im trying to achieve this but with no luck.
Change attr to prop. Like that:
function pagina(pag) {
$("#ifrx").prop('src','1430263377Physic.pdf#page='+pag);
return false;
}
Attribute is used to set initial value of iframe object property when parsing, but when you're changing the attribute, value doesn't populate to property.
By the way, as far as I know, there is no need to clear src, wait and set it to right value.
UPDATE:
I checked this approach for websites (see here). I guess it's impossible for PDFs, so replacing iframe with new one, with updated src can be only possible way to do it.
Related
So I've tried to do a bunch of research and can't seem to find the correct answer for my question so I wanted to reach out and see if anyone knows much.
What I'm attempting to achieve:
Check the contents inside an iFrame and return a boolean whether there is content or not.
Here is what I've attempted:
function check_iframe_body_content(element) {
let has_content = false;
let iframe = element.contents().find('body');
console.log(iframe);
if (iframe.length > 0) {
has_content = true;
}
return has_content;
}
The element is the iFrame return, which will be an array:
When the script tags are disabled, I get the following return:
When the script tags are enabled, I get the following return:
How can I properly determine if the <body> is empty and when it's not? I've tried to do .length on multiple different occasions and each time it comes back as has_content = true because it finds the body element, but it's actually empty.
All help will be appreciated!
You wont have access to the content inside iframe if it's loaded from another website as it's a major security breach.
if that was possible a website could add an iframe to google.com and get access to user personal information like their email address, name and etc.
depending on why you want to check content of iframe, there might be other workarounds.
Can you load a page into an iframe with JQuery? I have a page that creates a custom printable pdf and need it to load into an iframe to make it easier for the user. I use jquery to pull in all the variables otherwise I could have it load within the page. I am not sure what I am missing with this command to load the page within id="print_form_modal2"?
$.frameReady(function(){
$("#print_form").prepend('<div id="newDiv"></div>');
$('#newDiv').load("print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf");
}));
<iframe id="print_form_modal2" name="iFrame" src="">
You could do it the painless way and just use HTML:
Make an <a>nchor with the href to your PDF.
Add an iframe with a name attribute (ex. name="iframe1")
Next, add a target="iframe1" to the <a>.
PLUNKER
Its simple enough to do what you're trying to do using just JavaScript and HTML
HTML:
<iframe id="print_form_modal2" name="iFrame">
JavaScript:
function openIframe() {
document.getElementById("print_form_modal2").setAttribute("src", "https://www.example.com/");
}
You can see the code in a CodePen here: http://codepen.io/anon/pen/VjbBbY
In your code you need to replace https://www.example.com/ with the source path for PDF you wish to display, and change when openIframe is called to suit your requirements.
Here's a link to the codepen example
What you want to do on document ready (or whatever event is relevant to your logic) get the iframe and using the attr method change its source property to point to whatever new/old source.
Like this:
$(document).ready(function() {
$('#iframe-container').attr('src','http://www.w3schools.com/tags/tag_iframe.asp');
});
I'm trying to load a parent page into an object tag, and whilst I can get an alert to show I've got the code, I cannot get it into the <object> Any clues?
var page=parent.document.documentElement.innerHTML;
alert(page);
document.getElementById('close_skin').style.visibility="visible";
document.getElementById('show_skin').style.visibility="visible";
document.getElementById('show_skin').setAttribute("data",page);
Assuming I can get the code to appear, how can I "toggle" to a different set of styles? The parent uses ".xxx_fixed" classes, but the code in the object needs to use the ".xxx_float" classes that are also in the template CSS at top of page. (When I did it in another PERL program, it was easy just to rename the tags in the <body> from "class='xxx_fixed' " to "class='xxx_float' " (Can't do that so easily with global javascript replace as that would also rename the classes at top of code as well!)
I have just tried adding some script to the top of the var page object - which MAY work if I can get the code to appear ...
+'document.getElementById(\'icon_outer\').setAttribute(\'class\', \'icon_outer_float\')'
If you're interested as to the "why", the "fixed" keep menu / top bar fixed in one place when viewed in full screen browser, but the 'float' makes everything move in unison within the <object> "window" allowing viewer to pan around the template page like a static magnifying glass;
.menu_back_float{position:relative;top:0px;background-color:#f5eca4;min-height:520px;height:auto}
.menu_back_fixed{position:relative;top:35px;background-color:#f5eca4;min-height:550px;height:auto}
To load the parent page into an <object> element, you have to specify the URL of the page. To get the code and place it in a alert box, you can use jQuery's $.get() method (as long as you load it via a proxy domain), like this:
HTML:
// I'm just using W3Schools just to save time
<object data="http://www.w3schools.com/" width="1500" height="1200">
<embed src="http://www.w3schools.com/" width="1500" height="1200"></embed>
Your browser does not support the object tag.
</object>
JavaScript:
window.jQuery.get("http://www.yourdomain.com/?url=www.w3schools.com", function(response) {
window.alert(response);
}
For the second part of your question, you can use jQuery to change the name of the class from .xxx_fixed to .xxx_float:
function main() {
$('object').removeClass('xxx_fixed').addClass('xxx_float');
}
$(document).ready(main);
Hopefully I have answered your question correctly and thouroughly, and if I haven't, feel free to let me know so I can edit this.
I want to pull the onclick information from an a tag. I know how to do this normally and I've confirmed it works via the console. However, it returns null when attempted through an extension. Is this possible via an extension and if so: what strange method must be employed?
Example:
On the page: text
I'd like to be able to grab that something(stuff,otherstuff).
However, pure JS didn't work: String(document.getElementsByTagName("a")[10].onclick)
And neither did jQuery: String($(".tableclass").find("tbody").find("a")[10].onclick)
Both of the above working when entered into the console.
First of all, you can never read the onclick property that was set by a page because extension code runs in an isolated scope.
Secondly, even if the code was not isolated, the onclick property of <a onclick="foo"></a> may not have the value foo you are expecting. That is because a property is not the same thing as an HTML attribute.
Therefore, if you want to access the string value of an onclick attribute you can and should use linkElement.getAttribute('onclick'); instead.
Is this what you mean, that you want to change a href of the link? You can do it like this:
html:
<a href='foo' class='link-to-swap'>link</a>
javascript:
$(document).ready(function(){
$('.link-to-swap').click(function(e){
e.preventDefault();
var grabbedData = $(this).attr('data-id')
$(this).attr('href',grabbedData)
return false
})
})
here is the fiddle:
https://jsfiddle.net/cp6x9pf5/1/
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>