![[javascript] window.open POST 값 보내기](https://blog.ujsstudio.com/wp-content/uploads/2019/11/javascript.jpg)
$(".btn").click(function(){
var url = 'test.test/test';
var form = $("form");
var target = '타이틀 제목';
window.open(url, target, "width=500,height=500,resizable=yes,toolbar=yes,menubar=yes,location=yes");
form.attr('action', url);
form.attr('target', target); // window.open 타이틀과 매칭 되어야함
form.attr('method', 'post');
form.append('<input type="text" name="mb_id" value="foo">'); // 동적으로 값을 추가할때
form.submit();
});[태그:] javascript
[jquery]scrollMagic 사용법
<script src="/TweenMax.min.js"></script>
<script src="/ScrollMagic.min.js"></script>
<script src="/animation.gsap.min.js"></script>
<script src="/debug.addIndicators.min.js"></script>
var controller = new ScrollMagic.Controller();
$(".element").each(function(e){
var _this = this;
var scene = new ScrollMagic.Scene({triggerElement: _this, duration: "100%"})
.setTween(_this, {y: "40%", ease: Linear.easeNone})
.addIndicators() // add indicators (requires plugin)
.addTo(controller)
.reverse(false); // 뒤로돌아가지 않음
})
![[npm]babel 설치하기](https://blog.ujsstudio.com/wp-content/uploads/2019/11/npm.jpg)
[npm]babel 설치하기
바벨을 설치하기 전에 webpack을 설치해야한다. 준비가 안되었을 경우 아래글을 먼저 읽기
npm을 이용해서 webpack 설치하기
http://blog.ujsstudio.com/?p=194
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-devwebpack.config.js에 바벨로더를 추가해준다
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase: './dist' //개발서버가 root가 아닌 dist 폴더를 인식
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
};.babelrc 파일을 루트(webpack.config.js와 같은 위치)에 생성하고 아래와 같이 입력
{
"presets": ["@babel/preset-env"]
}npm run devserver 명령을 통해서 바벨이 잘 작동되는지 확인하면 된다.
[npm]webpack 설치하기
mkfir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-devwebpack.config.js 파일을 생성하고 아래와 같이 세팅해준다.
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
contentBase: './dist' //개발서버가 root가 아닌 dist 폴더를 인식
},
};package.json 파일에 스크립트를 추가한다.
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bulid": "webpack",
"devserver": "webpack-dev-server --open --progress"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.33.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
}
스크립트를 수정할 때마다 빌드명령하는게 불편하기 때문에 wevpack-dev-server를 이용한다. package.json 에 등록한 스크립트 ‘devserver’를 실행시키기 위해서 npm run devserver 한다. 소스를 변경하면 개발서버가 변경을 감지해서 빌드한것 처럼 브라우저를 갱신 시켜준다.
[참고]
https://webpack.js.org/guides/getting-started/#basic-setup
[같이 읽기]
바벨설치하기 : http://blog.ujsstudio.com/?p=198
[javascript] 아이프레임간 데이터 전송 방법
외부사이트를 아이프레임으로 불러오는 경우 높이 값을 수정하고 싶을때 ‘targetWindow.postMessage’를 이용해서 필요한 데이터를 전송, 전달 받을 수 있다.
크로스도메인에서도 사용가능한 방법이다.
<!-- mysite.com -->
<iframe id ="sizetracker" src="http://redcong.com/test.php" scrolling="auto" frameborder="0" allowtransparency="true" class="reser_frame" style="height: 500px !important;"></iframe>
<script type="text/javascript">
window.addEventListener("message", function(e){
var data = JSON.parse(e.data);
console.log(data);
}, false);
</script>
<!-- example.com -->
<div>...</div>
<script type="text/javascript">
parent.postMessage(
'{"height": '+ document.body.scrollHeight +'}',
"http://mysite.com" // '*' 사용할 경우 모든 도메인 허용
</script>참조:
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
[javascript]아이프레임에서 부모 요소 접근하기
아이프레임안에서 iframe 속성 제어와 같이 바깥요소를 제어하려면 어떻게해야 할까
window.parent.document를 사용하면 바깥 document객체에 접근할 수 있다. 아래는 inner.html이 index.html의 ‘.hello’ 요소에 접근해서 텍스트를 변경하는 예제이다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<iframe src="./inner.html" frameborder="0"></iframe>
</body>
</html><!-- inner.html -->
<div>...</div>
<script>
var parent = window.parent.document;
parent.querySelector('.hello').innerHTML = 'world';
</script>IFrame Player API을 이용한 유튜브 동영상 제어하기
작업을 하다보면 iframe으로 삽입한 유튜브 동영상을 제어해야하는 경우가 있어 구글링을 통해서 얻은 정보를 정리해봅니다.
- events 속성에 onReady, onStateChange와 같이 콜백함수를 지정할수 있다.
- 플레이어 매개변수 playerVars를 통해서 자동재생, 재생바 숨김, 관련동영상 표시 여부등을 설정할 수 있다.
- YT.Player의 매서드를 이용해서 플레이어를 제어할 수 있다.
그밖에 다양한 기능을 제공하고 있습니다. 자세한 내용은 공식문서를 참고하세요.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars : {
'controls': 0, //플레이어 컨드롤러 표시여부
'rel': 0, //연관동영상 표시여부
'playsinline': 1, //ios환경에서 전체화면으로 재생하지 않게하는 옵션
'autoplay': 1, //자동재생 여부(모바일에서 작동하지 않습니다. mute설정을 하면 작동합니다.)
'loop': 1,
'playlist': 'M7lc1UVf-VE'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>