Develop Reference

iframe and JS function combination

I am currently trying to make a full iframe web-based game to avoid page refresh.
I have this function in JS that works perfect:
function changeUrl(){
var site = "modules/news/news.php";
document.getElementsByName('game_frame')[0].src = site;
}
This is my HTML:
News
<iframe frameBorder="0" style="height: width: 100%; height: 650px; visibility: visible; color: white;" allowtransparency="true" class="content" name="game_frame">
</iframe
But I would like to fetch a value through the function so that I don't have to repeat the code for every page.
I was trying this but I can't get it to work:
function changeUrl(siteName){
var site = "modules/".siteName."/".siteName.".php";
document.getElementsByName('game_frame')[0].src = site;
}
I have tried for about 2 days to fix this but can't seem to find the solution. I might be googling wrong ofc. Thanks in advance for answers :)

How do I embed a part of a webpage with a certain name attribute within my webpage?

There's a webpage. Let's call it Example.html. I can not control/change this webpage but I want to embed a particular portion of it in my webpage.
The Example.html webpage has an HTML code that looks something like this:
<!--[stuff I don't want]-->
<form action="/example/index.pl" method="post" enctype="multipart/form-data" name="windyNights">
<!--[stuff I want!]-->
<\form>
<!--[stuff I don't want]-->
So how do I include the stuff I want in my webpage without including that stuff I don't need? is there a way to use the name attribute to isolate it somehow?

You can use iframe and a specific id of that particular div that you want to show and set the height and width of the iframe according to your target div.
see the example:
#project_summary {
width: 600px;
height: 220px;
padding: 15px 10px;
background:black;
}
<iframe id="project_summary" src="https://towkir.github.io/projectindex/projects.html#rsp" scrolling="no" frameborder="0"></iframe>
visit the link in the iframe separately to understand what is going on.

You can try
$('#target-div').load('http://www.example.com/Example.html form[name="windyNights"]');

How to set height and width of object tag so that no scrollbars appear

I am trying to display a webpage inside a div using object tag of html. I have tried loading it inside a div but since the host name of that webpage differes, it gives CORS error.
Also tried iframe but it requires scrolling='no' to remove scrollbars. So, I decided to use object tag after referring https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am able to remove the scroll bars if I specify fixed height and width in pixels. However, I want to decide this dynamically based on screen resolution to avaoid scrollbars appearing for any devices/browsers.
How can I achieve this? Below is my code snippet.
<div style="width: 100%; overflow:hidden;">
<!-- Main content goes here -->
<object type="text/html" data="<%=url%>" style="overflow: auto;" align="middle" standby="Loading ..." id="py-content"> </object>
</div>
I really appreciate any help on this.

iframe.scrollTo() doesn't work for Excel/PowerPoint documents on iPad

I want to implement custom scrolling of iframe content for iPad. My solution is the following. I have iframe:
<div id="scroller" style="height: 300px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" width="100%" name="iframe" src="1.pdf" />
</div>
And in javascript code I use:
top.frames['iframe'].scrollTo(x,y);
It works perfectly for pdf documents, but not for Excel and Power Point documents.
Does anyone have any suggestions?

It's not possible to show a worddocument or excel directly/correctly inside an Iframe.
You could use Google documents viewer/drive to present the documents with.
Check http://docs.google.com/viewer and https://drive.google.com/
But if it's possible, I would stick with PDF's

Multiple errors using iFrame on IE9

I have an iframe inside a div in my page like this:
<div id="ModalContato" style="display: none; text-align: center;">
<iframe id="IfrModalContato" frameborder="0" scrolling="yes" src="" style="width: 100%;
height: 100%;"></iframe>
</div>
And in my page there is a button inside a grid that calls this function:
function AbreModalContato() {
$("#IfrModalContato")[0].src = "ContatoModal.aspx?Modal=1&IdContatoPai=" + $("#ctl00_Corpo_HidIdContato").val();
$("#ModalContato").dialog({ modal: true, title: 'Cadastro de contatos', width: 970, height: 570 });
$("#ModalContato").dialog('open');
}
When I click on the button that opens the modal, I get a lot of JS errors like:
'Array' is not defined
'Object' is not defined
'Function' is not defined
On this question there's a guy that seems to have a problem just like mine(mine also happens only with IE9), but as a noob on JS and jQuery I don't know how to adapt my code to what he says.
I tried something like this:
function onShow() {
$("#IfrModalContato").attr("src", "ContatoModal.aspx?Modal=1&IdContatoPai=" + $("#ctl00_Corpo_HidIdContato").val());
$("#ModalContato").dialog({ modal: true, title: 'Cadastro de contatos', width: 970, height: 570 });
$("#ModalContato").dialog('open');
}
But that just won't work for me.
Anyone?
Thank you.

This is only a guess but make sure your not including the same jquery script file in the frame and on the page. IE doesn't like this, which is why I stay clear of iFrames or just use one set of scripts in the parent page which you can use on the iFrame window.