So I have an iFrame that displays a four page pdf on my SharePoint site. This iFrame is very handy for displaying the PDF, but I would like to make it so that clicking anywhere within the frame will open the PDF in browser. I have tried implementing some different strategies using and tags but have not found anything to accomplish this goal. The code I am using for the iFrame is below.
Any suggestions would be welcome.
<iframe width="500" height="550" src="URLtoPDF"></iframe>
You can use below jQuery code on document ready if both domains are same (iframe and where it is located)
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('iframe').load(function () {
$(this).contents().find("body").on('click', function (event) {
window.open($(this).attr("src"), "_blank");
});
});
});
</script>
Use below code in case of simple javascript without any js file reference
<script type="text/javascript">
window.onload = function () {
var frame = document.getElementById('iframe');
frame.onload = function () {
var body = frame.contentWindow.document.body;
body.onclick = function () {
var src = frame.getAttribute("src");
window.open(src, "_blank");
};
}
}
</script>
iframe is the id of the iframe element
Related
I want to test content of the iFrame Tag using jest.
For e.g I have a small html file that shows google homepage in iframe.
I want to test that google homepage is coming in iFrame or not.
<!DOCTYPE html>
<html>
<body>
<h2>Google</h2>
<iframe src="http://www.google.com" style="border:none;"></iframe>
</body>
</html>
can someone suggest me that how can I test that iframe using jest ?
Thanks in Advance.
const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); //--> get the file content
describe('Iframe Test Suit', function () {
beforeEach(() => {
document.body.innerHTML = html.toString();
});
it('Should load iframe content', function (done) {
const iframe = document.querySelector("iframe"); //--> get the iframe element
expect(iframe).toBeTruthy();
onLoad();
function onLoad() {
const iframeContent = iframe.contentDocument || iframe.contentWindow.document;
if (iframeContent.readyState == "complete") {
const input = iframeContent.querySelector("input");
expect(input).toBeTruthy();
done();
} else {
setTimeout(() => onLoad(), 100); //--> call again if iframe content is not loaded
}
}
});
});
By default, jsdom will not load any sub-resources like iframes. To load such resources you can pass the resources: "usable" option, which will load all usable resources.
jest.config.js
"testEnvironmentOptions": { "resources": "usable" }
At the moment I use php to collect data needs to be printed in one pdf and open pdf in new browser tab. The problem is that it generate to much traffic as soon as I've a lot of users and a lot of docs to be printed in a same time. So I'm looking for a way to collect everything in one html, open it in new tab, fill with data from back-end and print it after.
My issue is to initialize VueJS for the new browser tab. I always have the following warning in console:
vue.js:1141 [Vue warn]: Cannot find element: #app
I guess the reason is that VueJS works with SPA. Is there any way to implement my idea?
Here is template for a new tab needs to be opened in a new tab.
<div id="app">
<printing-form v-for="printedForm in printedForms" track-by="id" :printed-form="printedForm"></printing-form>
</div>
<template id="printingForm-template">
Some HTML need to be printed in new tab.
</template>
Below my JS code to init VueJS
var printButton = $('#print-button');
printButton.on('click', function(e) {
e.preventDefault();
printButton.unbind('click');
printButton.css('color', '#008000');
var idNumbers = TopPanel.getArrayOfId();
if (idNumbers == '') {
idNumbers = TopPanel.getIdNumber();
}
var url = window.location.href + '/form';
$.ajax({
url: url,
data: 'id=[' + idNumbers + ']',
success: function(data) {
var newWindow = window.open(url); //Open URL in new tab
var printedIds = $.parseJSON('[' + idNumbers + ']');
printedIds.forEach(function(item, i, arr) {
var printedField = $('#top-row-'+item).find('.table-field-printed');
if (!printedField.hasClass('true-value')) {
printedField.addClass('fa');
printedField.addClass('fa-check');
printedField.addClass('true-value');
}
});
printButton.css('color', '#4f5762');
printButtonInit();
newWindow.onload = function() {
VuePrinting.vueInit(newWindow); //Here I initialize VueJS module
}
},
error: function(xhr, textStatus, errorThrown) {
alert($.parseJSON(xhr.responseText));
printButton.css('color', '#4f5762');
printButtonInit();
},
});
});
}
This separate module for VueJs
var VuePrinting = (function() {
return {
vueInit: function() {
Vue.component('printingForm', {
temlate: newWindow.document.getElementById('printingForm-template')
});
var vm = new Vue({
el: newWindow.document.getElementById('app'),
data: {
printedForms: [
{ obj1 },
{ obj3 },
{ obj3 }
]
}
});
}
}
})();
UPDATE: I've corrected my code after RoyJ comment, so now it works correct. Only one note... template should also be changed from selector to:
newWindow.document.getElementById('printingForm-template')
When you specify a selector for your el, Vue will look in the current document for it. The new tab will not be part of the current document.
Save a reference when you open the tab. Write the HTML into its document. Query the #app out of the document, and use the actual element instead of a selector in your Vue setup:
var vm = new Vue({
el: newWindow.document.getElementById('app')
});
I want to disable the image link of edit using jquery in webgrid
my code is as follows.
grid.Column("Edit", format: id => new HtmlString(Html.ActionLink("[Edit]", "myactionname", "mycontrollername", new { id = id.Id }, new { #class="edit"}).ToHtmlString().Replace("[Edit]", "<img src=\"/images/edit_icn.png\" ... />")))
my jquery code is
<script type="text/javascript">
$(document).ready(function () {
alert("inside function")
$('.edit').attr("disabled", true);
alert("outside function");``
});
But the link is not getting disabled.. Please help me out.
How is the correct way to disable an input type="image" using jquery?
you can check out this stack overflow link it is similar to your question,May be it can help you
Go it working!!....
replaced my jquery code and it worked.
<script type="text/javascript">
$(function () {
$(".edit").click(function () {
return false;
});
});
I would like my webpage to render faster. Based on this article, I understand that the page renders when the 'load' event is fired.
When I look at the Network Tab of my Chrome browser, I see that the 'load' event is fired after an ajax call to a PHP script returns.
Webpage is live at http://www.99like.com/index.php
=> Is there any way to get the page to render before the PHP script is called?
Following is the extract of the code which I think is relevant for the question:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
var inputForm = "<div class='shadow'><form type='submit' onsubmit='displayChart(); return false'><input id='searchBox' type='text' size='30' value='search keyword' /></form></div>";
var chart = "<div id='chart' class='shadow'></div>";
var chartPage = inputForm + chart;
$(function ()
{
exampleChart();
});
function exampleChart() {
$('#searchBox').val("hotel"); // nice example
displayChart ();
}
function displayChart () {
var keyword = $('#searchBox').val();
var chart = new Highcharts.Chart({ ... });
chart.showLoading();
var phpFunctionURL = "getChartData.php";
var DataSeries;
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: false,
data: { ... },
success: function(json) { DataSeries = json; }
} );
}
</script>
A few remarks:
Make sure all your JavaScript are at the bottom of the page, including JQuery and Google Analytics code
Your web-page is missing the end tag
If needed, you could wait for the onLoad event to launch your AJAX request instead of the DomReady event, this will speed up the page rendering.
Looks like your AJAX request is synchronous. Making it asynchronous will solve the problem.
$.ajax( {
url: phpFunctionURL,
dataType: 'json',
async: true, // Changed from false to true
data: { ... },
success: function(json) { DataSeries = json; }
} );
I am using Amazon survey form template to create a survey.
however i would like to use validation.
I saw this question however i don't want to use the web services to create the hit but use their template.
How can I prevent the form from being submitted?
I found a way to do it:
I added a function to the submit button:
<script type='text/javascript'>
window.onload = function() {document.getElementById('submitButton').setAttribute('onclick', 'return validateForm()'); }
function validateForm() {
if (validate)
return true;
else
return false;
}
</script>
Here's an example of doing the validation with jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitButton').click(function() {
if ($('input[name=myField]').val() == '') {
alert('myField is required.');
return false;
}
return true;
});
});
</script>